一、选择器 相对于父元素的结构伪类
1 不限制类型
E:first-child:查找E元素的父级元素中的第一个子元素。在查找的时候并不会限制查找的元素的类型 。
E:first-child{} 查找E这个元素的父元素的第一个子元素
E:last-child{} 最后一个子元素
E:nth-child(n){}第n个子元素(索引从1开始)，计算方法是E元素的全部兄弟元素
- demo1 里的例子 与demo2对比
这个例子里 无限制查找索引从1开始
无限制类型查找lili的父元素ul的子元素的第一个元素 找的就会是div
但是样式不起作用 因为只会对li起作用
这个first就从ul结构内的第一个子元素开始算div就算是first
<style>
ul {
width: 280px;
margin: 0 auto;
}
li {
list-style: none;
float: left;
width: 60px;
height: 60px;
border: 1px solid #ccc;
margin-right: 10px;
margin-top: 10px;
text-align: center;
line-height: 60px;
}
/*没有限制类型 找li的父元素ul的子元素的第一个元素 找的就会是div 但是给了样式无效 因为找不到li 这个first就从ul结构内的第一个子元素开始算div就算是first */
li:first-child {
width: 60px;
height: 60px;
border: 1px solid black;
background-color: pink;
}
</style>
<body>
<ul>
<div>0</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
无限制类型选取父元素子元素中的第一个是div 所以样式不起作用
- demo1.2 li:nth-child(n) 无限制正着排序 索引从1开始
/*无限制类型 从li的父元素ul的子元素中找第二个 第二个元素刚好是第一个li所以样式生效*/
<style>
li:nth-child(2) {
background-color: hotpink;
}
</style>
<body>
<ul>
<div>0</div>
<li>1p h</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
无限制类型选取父元素第二个子元素 选取到第一个li所以样式起作用
- demo1.3 li:nth-last-child(n) 无限制倒着排序 索引从1开始
/*无限制类型 从li的父元素ul的子元素中倒着数第二个 刚好也是li 样式生效*/
<style>
li:nth-last-child(2) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<div>0</div>
<li>1p h</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
无限制类型找父元素的子元素倒着数第二个 刚好是li 样式生效
-
demo1.4 无限制类型的奇数偶数选择器
div开始是第一个first 所以偶数从li1开始
/*无限制类型从li的父元素的子元中的偶数*/
<style>
li:nth-child(even) {
background-color: orange;
}
/*无限制类型从li的父元素的子元中的奇数*/
li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>0</div>
<li>1p h</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
因为有个div 所以奇数从div开始
2 限制类型
E:first-of-type{}
E:last-of-type{} 发
E:nth-of-type(n){} 指定类型 索引从1开始
-
demo2.1 有限制选择第一个子元素li li:first-of-type
这个例子里 有限制类型查找 找li的父元素ul的子元素li中的第一个li 此时first从子元素li中找第一个 同时限制是li 所以样式会起作用
<style>
ul {
width: 280px;
margin: 0 auto;
}
li {
list-style: none;
float: left;
width: 60px;
height: 60px;
border: 1px solid #ccc;
margin-right: 10px;
margin-top: 10px;
text-align: center;
line-height: 60px;
}
/*没有限制类型 从li的父元素ul开始找第一个子元素 找的就会是0号div 但是给的样式无效 */
li:first-child {
background-color: pink;
}
/*有限制类型 从li的父元素ul开始找第一个li元素 找的就会是1号li*/
li:first-of-type {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>0</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
有限制类型.png
-
大demo 有限制类型选择元素 与无限制类型选择元素 对比
a)demo 无类型限制选择器li:nth-child(even);li:nth-child(odd)
计数从 ul的所有子元素开始计数 索引从1开始 如图所示 样式只jia在li上
<style>
/*ul li 样式同上*/
div {
float: left;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
margin-right: 10px;
margin-top: 10px;
border: 1px solid pink;
}
/*无限制类型从li的父元素的子元中的偶数*/
li:nth-child(even) {
background-color: orange;
}
/*无限制类型从li的父元素的子元中的奇数*/
li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>00</div>
<li>1p h</li>
<li>2</li>
<div>11</div>
<li>3</li>
<li>4</li>
<div>22</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
无限制类型选择器 所有的子元素 索引从第一个子元素开始 样式只加在li上
b) demo 有类型限制选择器
li:nth-of-type(even); li:nth-of-type(odd)从li的父元素ul中选择子元素li 以第一个li为first 索引从1开始
/*有限制类型从li的父元素的子元中的偶数*/
<style>
li:nth-of-type(even) {
background-color: orange;
}
/*有限制类型从li的父元素的子元中的奇数*/
li:nth-of-type(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<div>00</div>
<li>1p h</li>
<li>2</li>
<div>11</div>
<li>3</li>
<li>4</li>
<div>22</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
有限制类型选择器 所有的子元素 索引从li开始数 从1开始
1.3 其他无限制类型选择器（上面demo有举例）
E:nth-last-child(n): 同 E:nth-child(n) 相似，只是倒着计算
E:nth-child(even) 所有的偶数
E:nth-child(odd) 所有的奇数
3 为前五个后五个添加样式
n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
- li:nth-last-of-type(-n+4) 后四个
- li:nth-of-type(-n+4) 头四个
<style>
/*后4个*/
li:nth-last-of-type(-n+4) {
font-size: 10px;
}
/*头五个12345*/
li:nth-of-type(-n+5) {
font-size: 30px;
}
/*空值:没有任何的内容，连空格都没有*/
li:empty {
background-color: red;
}
</style>
</head>
<body>
<ul>
<div>00</div>
<li>1p h</li>
<li>2</li>
<div>11</div>
<li>3</li>
<li>4</li>
<div>22</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8 sb</li>
<li>9</li>
</ul>
</body>
头5个后4个
- demo 锚点 E:target 结合锚点进行使用，处于当前锚点的元素会被选中
li:target {
background-color: yellow;
}
image.png
image.png
4 总结 选择器
b) 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类
f) E:first-child:查找E这个元素的父元素的第一个子元素
g) E:last-child:最后一个子元素
h) E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素
i) E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
j) E:nth-child(even): 所有的偶数
k) E:nth-child(odd): 所有的奇数
l) E:nth-of-type(n):指定类型
m) E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
n) E:target 结合锚点进行使用，处于当前锚点的元素会被选中
o) 重点说明：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效
