关系选择符
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
#container>li>.a {
width: 100px;
height: 100px;
background-color: #f00;
}
/*将紧贴在.a后面的div元素选择出来*/
#container>li>.a+div {
width: 100px;
height: 100px;
background-color: #0f0;
}
/*选择.a元素所有的兄弟元素*/
.a~p {
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<ul id="container">
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
</ul>
</body>
</html>
属性选择符：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
#container>li>.a {
width: 100px;
height: 100px;
background-color: #f00;
}
#container>li>.a+div {
width: 100px;
height: 100px;
background-color: #0f0;
}
.a~p {
width: 100px;
height: 100px;
background-color: #00f;
}
/*选择具有class属性的元素*/
div[class] {
width: 100px;
height: 100px;
background-color: #000!important;
}
</style>
</head>
<body>
<ul id="container">
<li>
<div class="a"></div>
<div class="a5"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
#container>li>.a {
width: 100px;
height: 100px;
background-color: #f00;
}
#container>li>.a+div {
width: 100px;
height: 100px;
background-color: #0f0;
}
.a~p {
width: 100px;
height: 100px;
background-color: #00f;
}
div[class] {
width: 100px;
height: 100px;
background-color: #000!important;
}
/*选择具有class属性且属性值为一用空格分隔的字词列表，其中一个等于a5的元素。*/
div[class~="a5"] {
background-color: #ff0!important;
}
</style>
</head>
<body>
<ul id="container">
<li>
<div class="a a5"></div>
<div class="a5"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
<li>
<div class="a"></div>
<div></div>
<p></p>
</li>
</ul>
</body>
</html>
