实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<style>
#li1{background: red;}/*id选择器*/
.li2{background: blue;}/*class选择器*/
ul li{border:1px solid #ccc;}/*标签选择器*/
*[id]{font-size: 18px;color: #338595;}/*所有id*/
*[class]{height: 50px;}/*所有class*/
li[class ^='l']{box-shadow: 2px 2px 2px red;}/*li标签下有class选择器，并且以l开头的*/
li[id $='5']{box-shadow: 2px 2px 2px #000;}
/*li标签下有id选择器，并且以l结束的*/
li[id *='i']{line-height: 50px;}
/*li标签下有id选择器，包含i字母的字体行高为50px*/
.li6:before{/*在li6前面添加文字*/
content:"我是新添加的before";
display: block;
}
#li7:after{/*在li7后面添加文字*/
content:"我是新添加的after";
display: block;
}
ul li:first-child{background: #695;}/*第一个*/
ul li:last-child{background: #652;}/*最后个*/
p:only-child{background: red;}
h1:only-of-type{background: blue;}/*在人群中找到父级中只有一个h1*/
</style>
<body>
<ul>
<li>0</li>
<li id="li1">1</li>
<li class="li2">2</li>
<li id="li3">3</li>
<li class="li4">4</li>
<li id="li5">5</li>
<li class="li6">6</li>
<li id="li7">7</li>
<li>8</li>
<li>9</li>
</ul>
<!-- p:only-child{background: red;} -->
<div>
<div>
<p>独生子</p><!-- 这是独生子 -->
</div>
<div>
<p>独生子</p>
<p>独生子</p>
</div>
</div>
<div>
<h1>同父异母</h1>
<p>张三</p>
<span>李四</span>
</div>
<div>
<h1>1</h1>
<h1>2</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
