实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
/*层级选择器*/
div span{
background-color: lightgray;
}
/*id选择器*/
#id {
background-color:lightblue;
}
/*类选择器*/
.lightgreen {
background-color:lightgreen;
}
/*属性选择器*/
p[id="attr"] {
background-color: lightcoral;
}
/*群组选择器*/
.lightgreen, #attr {
color:yellow;
}
/*相邻选择器*/
#red + *{
color:red;
}
/*兄弟选择器*/
#green ~ *{
color:green;
}
/*伪类第一个子元素*/
ol :first-child {
color:blue;
}
/*伪类最后一个子元素*/
ol :last-child {
color:orange;
}
/*指定从1开始计数的子元素,第四个*/
ol :nth-child(4) {
color:green;
}
/*指定从最后1个开始计数的子元素,第2个*/
ol :nth-last-child(2) {
color:red;
}
/*伪类第一个li类型元素*/
ul li:first-of-type {
color:yellow;
}
/*伪类最后一个li类型元素*/
ul li:last-of-type {
color:coral;
}
/*伪类指定正数第三个li类型元素*/
ul li:nth-of-type(3) {
color:cyan;
}
</style>
</head>
<body>
<div>
<p>伪类：子元素选择器</p>
<ol>
<li>我是第一个子元素</li>
<li>我是第二个子元素</li>
<li>我是第三个子元素</li>
<li>我是正数第四个子元素</li>
<li>我是倒数第二个子元素</li>
<li>我是最后一个子元素</li>
</ol>
<hr>
<p>伪类：类型选择器</p>
<ul>
<li>我是第一个li类型的元素</li>
<li>我是第二个li类型的元素</li>
<li>我是第三个li类型的元素</li>
<li>我是第四个li类型的元素</li>
<li>我是最后一个li类型的元素</li>
</ul>
<span>层级选择器</span>
<p id="id">id选择器</p>
<p class="lightgreen">类选择器</p>
<p class="lightgreen">类选择器，群组选择器</p>
<p id="attr">属性选择器，群组选择器</p>
<p class="lightgreen">群组选择器</p>
<hr>
<p style="color:green">green,</p>
<p id="red" style="color:red;">red</p>
<p>我是red的相邻选择器</p>
<p style="color:blue">blue</p>
<hr>
<p style="color:blue">blue</p>
<p style="color:black">black</p>
<p id="green" style="color:green">green</p>
<p>我是green的兄弟选择器</p>
<p>我是green的兄弟选择器</p>
<p>我是green的兄弟选择器</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
伪类选择器：
子元素选择器关注的是子元素的位置
类型选择器关注的是元素的类型