代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器练习</title>
<style type="text/css">
/*id选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/
li{
margin-top:20px;
}
div{
margin-top:20px;
}
#a{
background-color: red;
}
/*类选择器:选择页面中具有同一类样式的全部元素*/
.b{
background-color: green;
}
/*父子选择器:元素之间是层级的关系,所选元素有共同的父级*/
ul li a{
background-color: lightgreen;
}
/*通配选择器:选择指定父级下面的所有层级的元素*/
b *{
border: 1px solid black;
}
/*子元素选择器 >: 选择父元素下所有的li元素,等价于标签选择器,所以它的优先级低于class,id*/
li > strong {
background-color: blue;
}
/*相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点 */
.c + li {
background-color: black;
}
/*全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点 */
#d ~ li {
background-color: coral;
}
/*根据属性名来选择:例如id属性*/
*[id] {
background-color: red;
}
/*根据属性名与值来选择:例如选择class="green"的元素*/
div[class="f"] {
background-color: lightgreen;
}
/*选择class属性值中包括指定单词的元素*/
div[class ~= "bc"] {
background-color: brown;
}
/*选择以'ph'字母开头的class类样式元素*/
div[class ^= "ev"] {
background-color: coral;
}
/*选择以's'结尾的类样式元素*/
div[class $= "gn"] {
background-color: lime;
}
/*选择属性值中包括指定字母'e'的类样式元素:;*/
div[class *= "z"] {
background-color: yellowgreen;
}
</style>
</head>
<body>
<ul type="none">
<li id="a">id选择器</li>
<li><b><a href="">统配选择器</a></b></li>
<li class="b">类选择器</li>
<li><strong>子元素选择器</strong></li>
<li class="b">类选择器</li>
<li><a href="">父子选择器练习</a></li>
<li class="c">相邻兄弟选择器</li>
<li id="d">相邻兄弟选择器</li>
<li>全部兄弟选择器</li>
<li>全部兄弟选择器</li>
</ul>
<div id="e">属性名选择器</div>
<div class="f">属性名属性值</div>
<div class="hds bc">包括指定单词的元素</div>
<div class="sdf bc">包括指定单词的元素</div>
<div class="evs">字母开头的元素</div>
<div class="evy">字母开头的元素</div>
<div class="stgn">字母结尾的元素</div>
<div class="ygn">字母结尾的元素</div>
<div class="xyz">包含字母的元素</div>
<div class="cyez">包含字母的元素</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
