🌟 所属专栏:前端只因变凤凰之路
🐔 作者简介:rchjr——五带信管菜只因一枚
😮 前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉 文章简介:本文介绍CSS的复合选择器。知识学习内容来自b站的 @黑马程序员 的视频
😃1 什么是复合选择器
在CSS中,可以把选择器分为基础选择器和复合选择器,而复合选择器又是由基础选择器进行组合形成的。通常是由两个或者多个基础选择器通过不同的方式组合而成的。
作用:更精准、高效的选择目标元素(即标签)
😃2 复合选择器的类别
常用的复合选择器包括:后代选择器、子选择器、并集选择器和伪类选择器。
🚩2.1 后代选择器(重要)
含义:后代选择器也叫包含选择器,可以选择父元素里面的子元素。写法就是父标签在前,中间用空格隔开,然后后面接一个子标签。子标签就叫做父标签的后代
注意:如果要对多个同样父元素中的一个父元素的子标签进行设置,可以对这个父元素单独设置一个类
语法:
元素1 元素2 {样式声明}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选出ol中的li */
ol li {
color: pink;
}
ol li a {
color: rgb(12, 10, 7);
}
/* 对多个同样父元素中的一个父元素的子标签进行设置 */
.nav li a {
color: blueviolet;
}
</style>
</head>
<body>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li><a href="#">我恁爹</a></li>
</ol>
<ul class="nav">
<li>111</li>
<li>222</li>
<li>333</li>
<li><a href="#">我恁爹</a></li>
</ul>
</body>
</html>
🚩2.2 子选择器(重要)
含义:子元素选择器只能选择作为某元素的最近一级子元素;并且中间用 > 分割,而不是空格。
注意:是最近的一级
语法:
元素1 > 元素2 {样式声明}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav>a {
color: aqua;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
🚩2.3 并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式。就是逻辑和,并且任何选择器都可以作为并集选择器的一部分(即后代选择器也可以作为一部分)。
语法:
元素1,
元素2 ,
元素3 {样式声明}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 要求1 把熊大熊二改为粉色 */
div,
p {
color: pink;
}
div,
p,
.pig li {
color: pink;
}
/* 要求2 把熊大熊二和小猪一家改为粉色 */
</style>
</head>
<body>
<div>"熊大"</div>
<p>"熊二"</p>
<span>光头前</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
🚩2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第一个和第n个元素。书写的最大特点是用冒号:表示
伪类选择器有很多,比如链接伪类,结构伪类等
语法:
元素1 元素2 {样式声明}
👉2.4.1 链接伪类选择器
注意
注意书写顺序,link,visited,hover,active(LVHA)
a链接必须单独指定样式
适用场景
一般就是指定一个没有点击时的颜色,然后再指定一个鼠标放上去时的颜色就可以。即link和hover
a:link 选择所有未被访问过的链接
a:visited 选择所有已被访问过的链接
a:hover 选择鼠标指到的链接
a:activate 选择鼠标按下未弹起的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 未访问的标签 */
a:link {
color: #333;
text-decoration: none;
}
/* 访问过的链接 */
a:visited {
color: blue;
}
/* 鼠标指到的链接 */
a:hover {
color: rgb(184, 77, 27);
}
/* 鼠标按下还没弹起 */
a:active {
color: bisque;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="www.baidu.com">未知网站</a>
</body>
</html>
👉2.4.2 focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器主要针对表单元素来说。
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
color: rgb(0, 0, 0);
background-color: rgb(16, 151, 88);
}
</style>
</head>
<body>
<input type="text"><input type="text"><input type="text">
</body>
</html>
💥3 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号和用法 |
后代选择器 | 选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择最近的一级元素 | 只选亲儿子 | 较少 | 符号是大于号 .nav>p |
并集选择器 | 选择某些需要相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 选择不同状态的链接 | 与链接相关 | 较多 | 重点记住一般情况和:hover |
:focus选择器 | 选择获得光标的表单 | 与表单相关 | 较少 | input:focus |