HTML5中CSS3的属性选择器
CSS3属性选择器：
E[att] (选择具有att属性的E元素。 )
E[att="val"] (选择具有att属性且属性值等于val的E元素。 )
E[att^="val"] (选择具有att属性且属性值为以val开头的字符串的E元素。 )
E[att$="val"] (选择具有att属性且属性值为以val结尾的字符串的E元素。 )
E[att*="val"] (选择具有att属性且属性值为包含val的字符串的E元素。 )
E[att~="val"] (选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 )
E[att] (选择具有att属性的E元素。 )
E[att="val"] (选择具有att属性且属性值等于val的E元素。 )
E[att^="val"] (选择具有att属性且属性值为以val开头的字符串的E元素。 )
E[att$="val"] (选择具有att属性且属性值为以val结尾的字符串的E元素。 )
E[att*="val"] (选择具有att属性且属性值为包含val的字符串的E元素。 )
E[att~="val"] (选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 )
E[att|="val"] (选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。有多个时，没有效果 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*1.img[alt="234"]{
margin: 20px;
}*/
/*2.img[alt^="2"]{!*以2开头*!
margin: 20px;
}*/
/*img[alt$="3"]{!*以3结尾*!
margin: 20px;
}*/
/*img[alt*="3"]{!*全部属性有3的*!
margin: 20px;
}*/
img[alt~="123"]{/*以3结尾*/
margin: 20px;
}
.divHeight{
height: 200px;
}
.divWidth{
width: 200px;
}
.divBg{
background-color: red;
}
.divBg2{
background-color: yellow;
}
</style>
<title>属性选择器</title>
</head>
<body>
<img src="../../img/11.jpg" alt="123">
<img src="../../img/11.jpg" alt="234">
<div class="divHeight divWidth divBg">
</div>
<div class="divWidth divHeight divBg2">
</div>
<div class="a-div">
1
</div>
<div class="b-div">
2
</div>
<div class="c-div">
3
</div>
</body>
</html>
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。