在css中,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
常用的复合选择器:后代选择器、子选择器、并集选择器、伪类选择器
(1)后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法格式:
元素1 元素2 { 样式声明 }
例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ol li{
color: #00BFFF;
}
</style>
</head>
<body>
<ol>
<li>我属于ol</li>
<li>我属于ol</li>
</ol>
<ul>
<li>我属于ul</li>
<li>我属于ul</li>
</ul>
</body>
</html>
结果图:
- 我属于ol
- 我属于ol
- 我属于ul
- 我属于ul
例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ol li{
color: #00BFFF;
}
ol li a{
color: greenyellow;
}
</style>
</head>
<body>
<ol>
<li>我属于ol</li>
<li>我属于ol</li>
<li><a href="#">我属于ol里面的li</a></li>
</ol>
<ul>
<li>我属于ul</li>
<li>我属于ul</li>
</ul>
</body>
</html>
结果图2:
- 我属于ol
- 我属于ol
- 我属于ol里面的li
- 我属于ul
- 我属于ul
(2)子选择器
子选择器只能选择作为某元素的最近一级子元素
语法格式:
元素1>元素2 { 样式声明 }
元素1和元素2中间用大于号隔开
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul>li{
color: #00BFFF;
}
</style>
</head>
<body>
<ul>
<li>我属于ul</li>
<ol>
<li>我属于ul</li>
</ol>
</ul>
</body>
</html>
结果图:
- 我属于ul
- 我属于ul
(3)并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式
并集选择器是各选择器通过英文逗号连接而成,任何形式的选择器都可以作为并集选择器的一部分
语法格式:
元素1,元素2 { 样式声明 }
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,p{
color: #00BFFF;
}
ul,li{
color: brown;
}
</style>
</head>
<body>
<div>喜羊羊</div>
<p>懒羊羊</p>
<ul>
<li>灰太狼</li>
<li>红太狼</li>
<li>小灰灰</li>
</ul>
</body>
</html>
结果图:
懒羊羊
- 灰太狼
- 红太狼
- 小灰灰
(4) 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。伪类选择器书写最大特点是用冒号表示,伪类选择器有很多,由链接伪类,结构伪类。
链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
为了确保生效,请按照LVHA的顺序声明:link-:visited-:hover-:active
:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素,焦点就是光标,一般情况下类表单元素才能获取。因此这个选择器也主要针对于表单元素。
input:focus {
background-color:blue
}