HTML5中CSS3的属性选择器

来源：互联网发布：红颜知已歌曲人名编辑：程序博客网时间：2024/05/18 07:28

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|="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>

0 0