一、定义
复合选择器是建立在基础选择器的基础上的,对基本选择器进行组合形成的
复合选择器可以更精确的,更高效的选择目标元素(标签),精确指出想要选择的标签,避免多选,错选。
复合选择器是由两个或多个基础选择器,通过不同方式组合而成的
常用的复合选择器:
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
二、后代选择器
1、标签选择器的后代
<ol>
加倍方法
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
像这种情况下,我们要选择里面的a标签的话,需要用到后代选择器来定位,而不是给全部的li标签都加属性,当然style属性是添加在head标签里面的,没写在body标签里面
<style>
ol li a {
color: red;
}
</style>
2、类选择器+标签选择器的后代
像这样:
<ul class="nav">
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
既有类选择器,又有标签选择器的,我们需要通过后代选择器,逐层深入,精确定位我们想要的添加属性标签位置
<style>
.nav li a {
color: yellow;
}
</style>
特点:
- 在后代选择器中,多个元素之间是用空格隔开的,
- 元素1是父级,元素2是自己,则最终选择是元素2
- 元素2可以是儿子,也可以是孙子,只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
三、子选择器
子选择器只能选择某一元素的子元素,不能选择其孙子元素,即只能选择器最近一级的元素
需要使用大于号(英文状态下)
如:
<style>
.nav>a {
color: red;
}
</style>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
特点:
- 元素1和元素2之间要用大于号隔开
- 元素1 是父级,元素2是子级,则最终选择的是元素2
- 元素2必须是亲儿子,其孙子,重孙之类的都不选择,区别于后代选择器,后代选择器是只要在它标签下的元素都会选定,需要层层深入
四、并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
使用逗号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div,
p,
.pig li {
color: pink;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
特点:
-
元素1 和 元素2 中间用逗号隔开
-
逗号可以理解为和的意思
-
并集选择器通常用于集体声明
五、伪类选择器
分为:链接伪类,结构伪类,
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之链接伪类选择器</title>
<style>
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
</html>
六、focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 <input> 类表单元素才能获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>focus伪类选择器</title>
<style>
/* // 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>