一真的小站

鳶飛魚躍,無處不是化境。

0%

十三、伪类选择器

十三、伪类选择器

1.兄弟伪类

主体案例

1
2
3
4
5
6
7
8
9
10
<body>
<ul>
<1i class="first">前端与移动开发</1i>
<span>能不能变成蓝色</span>
<1i>java</1i>
<1i>javascript</1i>
<li>c++</1i>
<1i>平面设计</1i>
</ul>
</body>

1) +:获取当前元素的相邻的满足条件的元素

1
2
3
4
5
6
7
<head>
<style>
.first + li{
color:blue;
}
</style>
</head>

1.必须相邻

2.必须是指定类型的元素

2) ~:获取当前元素的满足条件的兄弟元素

1
2
3
4
5
6
7
<head>
<style>
.first ~ li{
color:pink;
}
</style>
</head>

同级指定类型的元素

2.相对于父元素的结构伪类

1)查找元素;不过滤其它元素

查找E元素的父级元素中的第一个E元素

E:first-child:查找E元素的父级元素中的第一个E元素

下面这句样式查找:li的父元素中的第一个li元素

1.相对于当前指定元素的父元素

2.查找的类型必须是指定的类型

1
2
3
4
5
6
7
<head>
<style>
li:first-child {
color: red;
}
</style>
</head>

查找E元素的父元素中最后一个指定类型的子元素

E:1ast-child:查找E元素的父元素中最后一个指定类型的子元素

1
2
3
4
li:last-child {
/* background-color背景色 */
background-color: skyblue;
}

2)查找指定元素;过滤其他元素

查找的时候限制类型first-of-type

1.也是相对于父元素

2.在查找的时候只会查找满足类型条件的元素,过渡掉其它类型的元素

1
2
3
4
5
6
7
li:first-of-type {
color: red;
}

li:last-of-type {
color: orange;
}

3)指定索引位置

指定索引位置nth-child(从1开始的索引||关键字||表达式)

1
2
3
li:nth-child(5) {
background-color: lightblue;
}

4)奇偶数

偶数个元素添加背景even:偶数

1
2
3
li:nth-child(even) {
background-color: orange;
}

奇数个元素添加背景odd:奇数

1
2
3
li:nth-child(odd) {
background-color: pink;
}

5)指定头尾元素个数

想为前面的5个元素添加样式

n:默认取值范围为e~子元素的长度,但当n=0时选取无效

0>>5 -1>>4 -4>>1 -5>>0

1
2
3
4
5
6
7
li:nth-of-type(-n+5) {
font-size: 30px;
}

li:nth-last-of-type(-n+5) {
font-size: 30px;
}

6)空值

空值:没有任何的内容,连空格都没有

1
2
3
li:empty {
background-color: red;
}

其它伪类

E:target:可以为锚点目标元素添加样式,当目标元素被触发为当前锚链接的目标时,调用此伪类样式

1
2
3
h2:target{
color:red;
}
1
2
3
4
<li><a href="#title1">标题</a></li>
<h2 id=title1>
标题
</h2>