前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
外层标签 内层后代标签 {
属性: 属性值;
属性: 属性值;
...
}
选中的为外层标签中的内层指定后代标签。
- 元素1 和 元素2 中间用空格隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
<body>
<div class="one">
<div>
<span>123123123</span>
</div>
<div>123123</div>
</div>
<ul class="two">
<li>123123</li>
<li>123123</li>
<li>132123</li>
</ul>
<ul class="two">
<li>123123</li>
<li>123123</li>
<li>132123</li>
</ul>
<div class="demo1">
<span>123123123</span>
<p class="demo2">123123132</p>
</div>
</body>
/* 选中 one 的后代中全部的 span 标签 */
.one span {
color: chartreuse;
}
/* 选中 one 后代中的 div 中的全部 span */
.one div span {
background-color: red;
}
/* 选中页面中 ul 下的 li */
ul li {
background-color: blue;
}
/* 选中 demo1 的后代 demo2 */
.demo1 .demo2 {
color: blue;
}
2 子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。即只选择某元素的直接子元素，孙子等其他后代元素都不会选择。
语法：
父元素>子元素{
属性: 属性值;
...
}
选择父元素中为指定标签的子元素。
- 父元素 和子元素 中间用 大于号 隔开
- 最终选择的是子元素
- 子元素 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
<body>
<div class="father">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda dicta fugit nostrum consequatur, consequuntur vel temporibus exercitationem perspiciatis, ipsa provident dolor sapiente quidem qui voluptates itaque amet id praesentium aliquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque dolorum itaque consequuntur nisi possimus deleniti animi odio praesentium dolore. Iusto, recusandae. Est deleniti exercitationem minus sapiente, ipsa quas voluptate temporibus!</p>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, labore quae pariatur eius nesciunt expedita id voluptates odit reiciendis quia provident praesentium officiis! Consequuntur, voluptatibus perferendis culpa distinctio eligendi suscipit?</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam laborum dolorem, provident aut ab repellendus quae ad odit iusto molestiae. Magni voluptate quam praesentium! Qui eaque perspiciatis mollitia optio sit.</p>
</div>
</div>
</body>
<style>
.father>p {
background-color: aqua;
}
</style>
3 并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。
通常用于集体声明.
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1,
元素2,
... {
属性: 属性值;
...
}
同时选择元素1 和 元素2。
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
<body>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa dignissimos fuga quod libero pariatur quisquam delectus, cum ex nihil, odio modi, optio voluptatem quos sed velit aliquid corporis nam esse.</div>
<div>
<div>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati accusantium fuga inventore, quas officiis corporis? Deserunt, pariatur, laudantium maiores aut quisquam dignissimos, itaque quasi dicta magnam dolore nihil. Quasi, aliquam.</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime voluptas beatae obcaecati nesciunt dicta? Numquam alias tempora soluta quasi non? Numquam recusandae similique delectus ea ad tempore tempora pariatur unde.</p>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam rerum quia quod, obcaecati quidem ullam magni nisi blanditiis numquam saepe facere nobis a nihil cupiditate nulla vel hic omnis assumenda?</p>
</body>
div,
div span,
div>p,
p {
background-color: aqua;
}
4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
4.1 链接伪类选择器
链接伪类选择器有四种：
- :link 设置没有点击过的链接的样式
- :visited 设置访问过的链接的样式
- :hover 设置鼠标悬停在链接上的样式
- :active 设置鼠标点击但是没有松手的样式
<body>
<a href="www.baidu.com">对比链接</a>
<a href="#">链接</a>
</body>
a {
font-size: 20px;
color: black;
}
a:link {
color: aqua;
}
a:visited {
color: red;
}
a:hover {
font-size: 40px;
}
a:active {
color: darkblue;
font-size: 30px;
background-color: chartreuse;
}
链接伪类选择器注意事项:
- 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
- 记忆法：love hate 或者 lv 包包 hao 。
- 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际工作开发中的写法：
一般都只修改链接的默认样式，设置鼠标悬停的样式，其他样式很少设置。
<a href="www.xxx.cn"></a>
a {
color: black;
text-decoration: none;
}
a:hover {
color: aqua;
}
4.2 :focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
实现一个小demo：输入框获取焦点时修改背景颜色
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
<style>
input:focus {
background-color: aqua;
}
</style>
5 复合选择器总结
本文含有隐藏内容，请 开通VIP 后查看