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>