HTML5的属性选择器（id和class）直接上图，copy下来⾃⼰测试使⽤：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5的属性选择器(id和class)</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*ul下所有的class选择器*/
ul.box {
float: left;
margin-right: 10px;
list-style: none;
text-align: center;
}
/*所有的li*/
li {
margin-bottom: 10px;
line-height: 2.4;
border: 1px solid #000;
}
/*ul下所有的class选择器*/
ul[class="box"] {
margin-left: 10px;
margin-right: 20px;
margin-top: 10px;
}
}
/*选取属性值中包含指定词汇的元素*/
li[class~='list5'] {
color: red;
}
/*⽤来匹配属性值以指定值开头的每个元素*/
li[class^='list6'] {
font-size: 30px;
}
/*匹配属性值中包含指定值的每个元素*/
li[class*='list-10'] {
color: blue;
}
/*匹配属性值以指定值结尾的每个元素*/
li[class$='11'] {
font-weight: 900;
}
/*选取带有以指定值开头的属性值的元素，该值必须是整个单词*/        li[id|='list'] {
font-weight: 900;
color: green;
}
li[class|='list'] {
font-weight: 900;
color: green;
}
/*规定属于其⽗元素的第5个⼦元素的每个 p 的背景⾊：*/
:
cssclass属性nth-child(5) {
color: orange;
}
</style>
</head>
<body>
<ul id="box1" class="box">
<li id="list3" class="list-5 list-7">111</li>
<li id="list4" class="list6 list-8">222</li>
<li id="list-5" class="list7 list-9">333</li>
<li id="list6" class="list8 list-10">444</li>
<li id="list7" class="list-9 list-11">555</li>
<li id="list8" class="list10 list-12">666</li>
<li id="list-9" class="list11 list-13">777</li>
<li id="list10" class="list12 list-14">888</li>
<li id="list11" class="list13 list-15">999</li>
<li id="list12" class="list14 list-16">000</li>
</ul>
<ul id="box2" class="box">
<li id="list3" class="list5 list-7">111</li>
<li id="list4" class="list6 list-8">222</li>
<li id="list5" class="list7 list-9">333</li>
<li id="list6" class="list8 list-10">444</li>
<li id="list7" class="list9 list-11">555</li>
<li id="list8" class="list10 list-12">666</li>
<li id="list9" class="list11 list-13">777</li>
<li id="list10" class="list12 list-14">888</li>
<li id="list11" class="list13 list-15">999</li>
<li id="list12" class="list14 list-16">000</li>
<li id="list12" class="list14 list-16">000</li>    </ul>
<ul id="box3" class="box">
<li id="list3" class="list5 list-7">111</li>
<li id="list4" class="list6 list-8">222</li>
<li id="list5" class="list7 list-9">333</li>
<li id="list6" class="list8 list-10">444</li>
<li id="list7" class="list9 list-11">555</li>
<li id="list8" class="list10 list-12">666</li>        <li id="list9" class="list11 list-13">777</li>        <li id="list10" class="list12 list-14">888</li>        <li id="list11" class="list13 list-15">999</li>        <li id="list12" class="list14 list-16">000</li>    </ul>
<ul id="box4" class="box">
<li id="list3" class="list5 list-7">111</li>
<li id="list4" class="list6 list-8">222</li>
<li id="list5" class="list7 list-9">333</li>
<li id="list6" class="list8 list-10">444</li>
<li id="list7" class="list9 list-11">555</li>
<li id="list8" class="list10 list-12">666</li>        <li id="list9" class="list11 list-13">777</li>        <li id="list10" class="list12 list-14">888</li>        <li id="list11" class="list13 list-15">999</li>        <li id="list12" class="list14 list-16">000</li>    </ul>
<ul id="box5" class="box">
<li id="list3" class="list5 list-7">111</li>
<li id="list4" class="list6 list-8">222</li>
<li id="list5" class="list7 list-9">333</li>
<li id="list6" class="list8 list-10">444</li>
<li id="list7" class="list9 list-11">555</li>
<li id="list8" class="list10 list-12">666</li>        <li id="list9" class="list11 list-13">777</li>        <li id="list10" class="list12 list-14">888</li>        <li id="list11" class="list13 list-15">999</li>        <li id="list12" class="list14 list-16">000</li>    </ul>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。