您的位置：首页 > Web前端 > CSS

CSS3的属性选择器

2017-05-12 12:01 218 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img[alt|="123"]{
margin: 30px;
}
li[class|="test3"] {
color: #f00;
}
a[class~="external"] {
color: #f00;
}

</style>
<title>CSS3属性选择器</title>
</head>
<body>
<!--E[att]     CSS2 选择具有att属性的E元素。
E[att="val"]   CSS2 选择具有att属性且属性值等于val的E元素。
E[att~="val"]  CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
（包含只有一个值且该值等于val的情况）。
E[att^="val"]  CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]  CSS3 选择具有att<
be2b
span style="font-family:'宋体';">属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]  CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"]  CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
-->
<img src="../../img/4.jpg" alt="123">
<img src="../../img/4.jpg" alt="234">
<ul>
<li class="test1-abc">列表项目</li>
<li class="test2-abc">列表项目</li>
<li class="test3">列表项目</li>
<li class="test3-abc">列表项目</li>
<li class="test4-abc">列表项目</li>
<li class="test5-abc">列表项目</li>
<li class="test6-abc">列表项目</li>
</ul>
<ul>
<li><a href="?" class="external txt">外部链接</a></li>
<li><a href="?" class="txt">内部链接</a></li>
<li><a href="?" class="external txt">外部链接</a></li>
<li><a href="?" class="txt">内部链接</a></li>
</ul>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航