实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的常用选择器</title>
<style>
ul {
border:1px solid red;
margin: 0;
padding-left: 0;
}
ul li {
list-style: none;
width:40px;
Height:40px;
background-color: aquamarine;
/*background-position: 10px 10px;*/
display: inline-block; /*块级元素显示为一行*/
font-size: 20px;
margin-left: 5px;
border-radius: 40%; /*四角弧度*/
box-shadow: 2px 2px 10px black;
text-align: center; /*文字居中*/
line-height: 40px;
}
.A { /*类选择器*/
background-color:red;
}
.B,.C { /*群组选择器*/
background-color: burlywood;
}
.C + * { /*相邻选择器 下一个*/
background-color: darkgray;
}
.E ~ * { /*兄弟选择器 水平以后*/
background-color: white;
}
ul :first-child { /*子类选择器 ul第一个子元素*/
color: greenyellow;
}
ul :last-child { /*子类选择器 ul最后一个子元素*/
color: BLUE;
}
ul :nth-child(3) { /*子类选择器 ul顺数第3个子元素*/
color: yellow;
}
ul :nth-last-child(2) {/*子类选择器 ul倒数第2个子元素*/
color: greenyellow;
}
li:nth-of-type(2){ /*元素选择器 li顺数第2个子元素*/
color:white;
}
</style>
</head>
<body>
<ul>
<li class="A">1</li>
<li class="B">2</li>
<li class="C">3</li>
<li class="D">4</li>
<li class="E">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例学习总结：
1、层级/后代选择器
ul li {...}
2、属性选择器
#id {...}
<li id='id' >{...}
3、群组选择器
#id1 , #id2 {...}
4、相邻选择器
#id + li {...} 相邻的第一个li
#id + * {...} 相邻的第一个元素
5、兄弟/同级选择器
#id ~ * {...} 水平以后的全部元素
6、伪类：子类选择器
ul :first-child{...} ul中第一个子元素
ul :last-child{...} ul中最后一个子元素
ul :nth-child(2){...} ul中第二个子元素,关注点在“元素位置”
ul :nth-last child(3){...} ul中倒数三个子元素
7、伪类：类型选择器
li :nth_of _type(2){...} li 中第二个子元素，关注点在“元素类型”