文章目录
- 1、E:root
- 2、E:nth-child(n)
- 3、E:nth-last-child(n)
- 4、E:nth-of-type(n)
- 5、E:nth-last-of-type(n)
- 6、E:last-child
- 7、E:first-of-type
- 8、E:last-of-type
- 9、E:only-child
- 10、E:only-of-type
- 11、E:empty
- 12、E:target
- 13、E:not(s)
- 14、E:enabled & E:disabled
- 15、E:checked
1、E:root
该选择器选择文档的根节点，效果和设置 html 相同。（在html⽂档中根元素就是html）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
:root {
background: lightgreen;
}
/*
与下列样式效果相同
html{
background: lightgreen;
}
*/
</style>
</head>
<body>
</body>
2、E:nth-child(n)
选择 E 元素父元素的第 n 个子元素。n 有两种取值：
-
n取值为整数
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:nth-child(3) {
background-color: red;
}
</style>
</head>
<body>
<p>1</p>
<a href="">2</a>
<p>3</p>
<p>4</p>
</body>
选择器选取了 <p> 的父元素的第三个子元素。
注：这些子元素不一定是同种类型，如上述例子中，父元素的第二个子元素是 <a> ,它与其它 <p> 是兄弟元素。另外，当该选择器取整数时，只能取正整数。
-
n取值为表达式
当取值为表达式时，变量只能使用 n，并且 n 从 0 开始依次加1，即取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时，不选取元素。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:nth-child(2n + 1) {
background-color: blue;
}
</style>
</head>
<body>
<p>1</p>
<a href="">2</a>
<p>3</p>
<p>4</p>
</body>
表达式为 2n-1，[n=0,1,2,3...]，计算结果为 nth-child(1)，nth-child(3)…，所以该选择器选择了第一个和第三个元素。
注：使用表达式时，CSS3 提供了两个特殊值：odd 和 even。odd 相当于 2n+1，even 相当于 2n。
3、E:nth-last-child(n)
与 E:nth-child(n) 相比多了一个 last，其实该选择器与前者十分相似，只不过前者是从前往后计数第 n 个，该选择器是从最后一个往前计数。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:nth-last-child(2n + 1) {
background-color: red;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<a href="">3</a>
<p>4</p>
<p>5</p>
<p>6</p>
</body>
可以看到，从最后一个元素往前计数，第一个、第三个、第五个元素都被选择器选中。
4、E:nth-of-type(n)
该选择器与 E:nth-child(n) 语法相同，在选择的元素上有些区别。该元素选择的是与 E 相同类型的兄弟元素，我们来看一个例子：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 选择的是与 E 相同类型的兄弟元素 */
p:nth-of-type(2n + 1) {
background-color: red;
}
</style>
</head>
<body>
<p>1th of ele,1th of p</p>
<p>2th of ele,2th of p</p>
<a href="https://www.baidu.com">3th of ele,1th of a</a>
<p>4th of ele,3th of p</p>
<p>5th of ele,4th of p</p>
<p>6th of ele,5th of p</p>
</body>
该选择器选择的是与 p 类型相同的兄元素，表达式为 2n+1，即选择奇数项元素，可以看到第一个第三个第五个 p 元素都被选中了。
5、E:nth-last-of-type(n)
该选择器与之前我们学习的 E:nth-last-child(n) 相类似，它与上一个选择器 E:nth-of-type(n) 选择元素的方式相同，只不过计数是从最后一个符合条件的兄弟元素开始往前计数。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 选择的是与 E 相同类型的兄弟元素 ，计数是从最后一个符合条件的兄弟元素开始往前计数*/
p:nth-last-of-type(2n + 1) {
background-color: red;
}
</style>
</head>
<body>
<p>1th of ele,1th of p</p>
<p>2th of ele,2th of p</p>
<a href="https://www.baidu.com">3th of ele,1th of a</a>
<p>4th of ele,3th of p</p>
<p>5th of ele,4th of p</p>
<p>6th of ele,5th of p</p>
<p>7th of ele,6th of p</p>
</body>
6、E:last-child
该选择器选择 E 元素的父元素的最后一个子元素。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* E:last-child 选择 E 元素的父元素的最后一个子元素*/
p:last-child {
background: red;
}
</style>
</head>
<body>
<p>wo</p>
<p>ai</p>
<p>bai</p>
<p>du</p>
</body>
注：该选择器需要满足父元素的最后一个元素和 E 才会选取，否则不会选取，例如下面这段代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:last-child {
background: red;
}
</style>
</head>
<body>
<p>wo</p>
<p>ai</p>
<p>bai</p>
<p>du</p>
<span>Hello</span>
</body>
7、E:first-of-type
该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:first-of-type {
background: red;
}
</style>
</head>
<body>
<h1>baidu</h1>
<p>wo</p>
<p>ai</p>
<p>bai</p>
<p>du</p>
<h1>baidu</h1>
</body>
可以看到，第一个子元素是 <h1>，第一个符合类型一致的子元素是 <p>wo</p>，选择器选择了该元素。
8、E:last-of-type
该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:last-of-type {
background: red;
}
</style>
</head>
<body>
<h1>baidu</h1>
<p>wo</p>
<p>ai</p>
<p>bai</p>
<p>du</p>
<h1>baidu</h1>
</body>
可以看到，最后一个子元素是 <h1>，最后一个符合类型一致的子元素是 <p>du</p>，选择器选择了该元素。
注：first-of-type、 last-of-type 与之前的 last-child 和在 CSS2 中我们这里没有讲解的 first-child 的区别就是，first-of-type、last-of-type 选择的是第一个或最后一个类型一致的元素，这个元素一定存在，而 first-child 和 last-child 则第一个或最后一个元素与 E 类型一致时才会选择，否则选择器不生效，即符合的元素不一定存在。
9、E:only-child
该元素选择的是 E 是其父元素唯一的子元素：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1 {
border: 2px solid;
}
.div2 {
margin-top: 10px;
border: 2px solid;
}
p:only-child {
background: red;
}
</style>
</head>
<body>
<div class="div1">
<p>hello world</p>
</div>
<div class="div2">
<p>hello baidu</p>
<span>wo ai xue xi</span>
</div>
</body>
可以看到，父元素中唯一有一个 <p> 元素的是 div1，div2 中有两个元素，所以选择器选择了 <p>hello world</p>。
10、E:only-of-type
该选择器选择的是 E 是其父元素唯一的子元素类型：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1 {
border: 2px solid;
}
.div2 {
margin-top: 10px;
border: 2px solid;
}
p:only-of-type {
background: red;
}
</style>
</head>
<body>
<div class="div1">
<p>hello world</p>
</div>
<div class="div2">
<p>hello baidu</p>
<span>wo ai xue xi</span>
</div>
</body>
可以看到，选择器选择了两个元素，在两个 div 块中，都只有一个 <p> 类型，所以都被选取。
11、E:empty
该选择器选择的是空元素，匹配每个没有任何子级的元素（包括文本节点）。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*E:empty 选择的是空元素*/
p:empty {
width: 1000px;
height: 20px;
background: red;
}
</style>
</head>
<body>
<p>hello world</p>
<p></p>
<p>hello bai du</p>
</body>
可以看到，第二个空的
元素被选取了。
12、E:target
该选择器选择的是一个 id 与 当前 url 匹配的元素，匹配当前活动的target元素的样式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*E:target 选择的是一个 id 与 当前 url 匹配的元素*/
:target {
border: 2px solid;
background: lightgreen;
}
</style>
</head>
<body>
<a href="#p1">jump to p1</a><br />
<a href="#p2">jump to p2</a>
<p id="p1">p1</p>
<p id="p2">p2</p>
</body>
点击两个 link 链接，可以发现，对应跳转的元素样式相应的改变了。
13、E:not(s)
该选择器匹配不符合参数选择器 s 描述的元素（匹配除了指定s元素的其他元素）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.demo {
color: lightgreen;
}
p:not(.demo) {
color: red;
}
/*E:not(s) 匹配不符合参数选择器 s 描述的元素*/
:not(.demo) {
color: blue;
}
</style>
</head>
<body>
<p class="demo">hello world</p>
<p>hello bai du</p>
<span>hello</span>
</body>
可以看到，第一个否定伪类选择器选择了 class 不为 demo 的 <p> 元素，样式为红色；第二个否定伪类选择器选择了 class 不为 demo 的 <span> 元素，样式为蓝色。
14、E:enabled & E:disabled
该选择器匹配的是元素的可用和禁用状态，主要用于表单元素。E:enabled 匹配每个启用的元素， E:disabled匹配每个禁用的元素。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*E:enabled & E:disabled 匹配的是元素的可用和禁用状态*/
input:enabled {
background: red;
}
input:disabled {
background: lightgreen;
}
</style>
</head>
<body>
<input
type="text"
name="test1"
placeholder="disabled"
disabled="true"
/><br />
<input type="text" name="test2" placeholder="enabled" />
</body>
可以看到，输入框的可用和不可用两种状态都被选择器获取到了。
15、E:checked
匹配每个选中的输⼊元素(仅⽤于单选按钮或复选框)，该选择器一般用于 radio或 checkbox，选择它们的 checked 状态：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
input[type='checkbox']:checked {
margin: 100px;
}
</style>
</head>
<body>
<input type="checkbox" name="checkbox" />
</body>
点击复选框，查看选择器选中元素的效果。可以看到，当复选框属性为 checked 时，复选框被选中，样式改变。
示例2：
input:checked{
width: 100px;
}
input:checked~label {
color: red;
}
<p><input type="radio" checked="checked" value="html5" name="test"><label>html5</label></p>
<p><input type="radio" value="css3" name="test"><label>css3</label></p>