CSS复合选择器

复合选择器：

介绍：

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的.

复合选择器可以更准确,更高效的选择目标元素(标签)
复合选择器是由多个或两个基础选择器,通过不同的方式组合而成的.
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

介绍

后代选择器又称为包含选择器，可选择父元素里子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 {样式声明} 上述语法表示选择元素1里面的所有元素2（后代元素）例如： ul li {样式声明} /选择ul里面所有的li标签元素 /

元素1和元素2中间用空格隔开。
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

示例代码：

HTML 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        ul li a {
            color: red;
        }
        ul a {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是ul标签下li标签里的标签 <a></a ></li>
        <li>这是ul li标签里的标签 <a></li>
    </ul>
    <ol>
        <li>这是ol li标签里的标签 <a></li>
    </ol>
</body>
</html>

子选择器

介绍：

子选择器（也可理解为基于元素层级的子选择器），只能选择作为某元素的最近一级子元素，简单理解就是"选亲儿子元素"。

语法：

元素1 > 元素2 {样式声明} 上述语法表示：选择"元素1"里面的所有直接后代（子元素）元素2。 div > p {样式声明} /* 选择div里面所有最近一级的p标签元素 */

元素1和元素2中间用大于号（>）隔开。
元素1是父级，元素2是子级，最终选择的是元素2。
元素2必须是"亲儿子"，其孙子、重孙等更下层的后代不归它管，所以子选择器也可称为"亲儿子选择器"。

示例代码：

HTML 复制代码

<style>
ul li a {
    color: red;
}
ol li a {
    color: blue;
}
</style>
</head>
<body>
<ul class="a">
    超链接
    <li>这是ul标签中li标签里的a标签</li>
    <li>这是ul标签中li标签里的a标签</li>
    <li><p>这是ul标签中li标签里的a标签</p ></li>
</ul>
<ol>
    <li>这是ol标签中li标签里的a标签</li>
    <li>这是ol标签中li标签里的a标签</li>
</ol>
</body>

并集选择器：

介绍：

并集选择器可选择多组标签，同时为他们定义相同的样式，通常用于集体声明并集选择器是各选择器（用英文逗号,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1,元素2 {样式声明} 上述语法表示选择元素1和元素2。例： ul, div {样式声明} /选择ul和div标签元素 /

元素1和元素2中间用逗号分隔
逗号可以理解为"和"的意思
并集选择器通常用于集体声明

示例代码：

HTML 复制代码

<style>
p,div,span {
    color: red;
}
</style>
</head>
<body>
    <p>大数据招1班</p >
    <div>网页设计</div>
    <span>学习周</span>
</body>

伪类选择器

介绍：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个、第n个元素。

特点

是用冒号（:）表示，比如：hover、:first-child。 伪类选择器很多，比如有链接伪类、结构伪类等

1.hover 鼠标放上去后显示的效果

HTML 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #t1:hover {
            color: coral;
        }
    </style>
</head>
<body>
    <div id="t1">你好</div>
</body>
</html>

focus选择器

2.focus 获取焦点之后显示的效果

HTML 复制代码

<style>
input:focus {<!--当input获取焦点之后，将框的背景颜色设置成coral。-->
    background-color: coral;
}
</style>
</head>
<body>
    <p>这是p标签</p >
    <div>这是div标签</div>
    <!-- 用法示例 -->
    用户名：<input type="text" />
    密码：<input type="password" />
</body>

复合选择器总结:

复合选择器类型	作用	特征	使用情况	隔开符号及写法
后代选择器	用来选择后代元素	选择所有后代（包含孙子）	较多	符号是空格（例：`nav a`）
子选择器	选择最近一级元素	只选亲儿子	较少	符号是大于号（例：`nav>p`）
并集选择器	选择某些相同样式的元素	可用于集体声明	较多	符号是逗号（例：`nav,header`）
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记 `a{}` 和 `a:hover` 实现
focus选择器	选择获取光标的表单元素	跟表单相关	较少	记作 `input:focus` 这种写法