CSS复合选择器
根据选择器的类型把选择器分为基础选择器和复合选择器， 复合选择器是建⽴在基础选择器之上，对基本选择器进⾏组合形成的
▪ 复合选择器可以更准确⾼效的选择⽬标元素（标签）
▪ 复合选择器是由两个或多个基础选择器，通过不同⽅式组合⽽成
▪ 常⽤的复合选择器：后代选择器、⼦选择器、并集选择器、伪类选择器等
①后代选择器※
⼜称为包含选择器，可以选择⽗元素⾥⾯⼦元素（层递关系）
写法是把外层标签写在前⾯，内层标签写在后⾯，中间⽤空格分隔
当标签发⽣时，内层标签就为外层标签的后代
▪ 元素1元素2中间⽤空格隔开
▪ 元素1是⽗级，元素2是⼦级，最终选择是元素2
▪ 元素2可以是⼉⼦也可以是孙⼦，只要是元素1后代
▪ 元素1和元素2可以是任意基础选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| / 将ol标签里的li的a标签改样式/
<style>
ol li a{
color:red;
}
</style>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| /将类名为.nav的li标签的a标签改样式/
<style>
.nav li a{
color:red;
}
</style>
<body>
<ul>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ul>
<ul class="nav">
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
<li><a href="#">我是孙子</a></li>
<li><a href="#">我是孙子</a></li>
</ul>
</body>
|
②子选择器※
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
表示选择元素1里面的所有直接后代（子元素）元素2
元素1和元素2中间用 “>” 隔开
元素1是父级，元素2是子级，最终选择是元素2
元素2必须是亲儿子，其孙子重孙不归他管
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
.nav>a{
color:red;
}
</style>
<body>
<div class="nav">
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
</body>
|
③并集选择器※
并集选择器可以选择多组标签，同时为他们定义相同样式。通用于集体声明
- 通过英文 “ , ” 连接而成，任何形式的选择器都可以作为并集选择器的一种。
- 上述语法表示选择元素1和元素2
- 选择器代码竖着写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
/将熊大和熊二改颜色/
div,
p{
color:pink;
}
/将熊大熊二和小猪一家改为粉色/
div,
p,
.pig li{
color:pink;
}
</style>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
|
④伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素
- 用 ” ：“ 表示，如：hover、：first-child
1.链接伪类选择器（常用）
① a:link /选择所有未被访问（没有点击过）的链接/
1
2
3
4
5
6
7
8
9
10
| 如：
<style>
a：link{
color:black;
text-decoration:none;（下划线）
}
</style>
<body>
<a href="#">小猪佩奇</a>
</body>
|
② a:visited /选择所有已被访问（点击过）的链接/ 点击后变色
1
2
3
4
5
6
7
8
| <style>
a：visited{
color:orange;
}
</style>
<body>
<a href="#">小猪佩奇</a>
</body>
|
③ a:hover /选择鼠标指针经过的链接/ 光标经过后变色 ※
1
2
3
4
5
6
7
8
| <style>
a：hover{
color:blue;
}
</style>
<body>
<a href="#">小猪佩奇</a>
</body>
|
④ a:active /选择活动链接（鼠标按下未弹起的链接）/
1
2
3
4
5
6
7
8
| <style>
a：active{
color:green;
}
</style>
<body>
<a href="#">小猪佩奇</a>
</body>
|
△注意事项：
①为了确保代码生效，要按照 link - visited - hover - active 的顺序书写
②实际工作中要给链接单独指定样式
链接伪类选择器实际开发中的写法：
1
2
3
4
5
6
7
8
| /a 是标签选择器 所有的链接/
a{
color:gray;
}
/ :hover 是链接伪类选择器 鼠标经过/
a:hover{
color:red; /鼠标经过的时候，由原来的灰色变成了红色/
}
|
2. :focus 伪类选择器
：focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况**< input >类表单元素**才能获取，因此这个选择器也主要针对于表单元素来说。
1
2
3
4
5
6
7
8
9
10
11
| 如：把获得光标的input表单元素选取出来
<style>
input:focus{
background-color:yellow;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
|
总结：
