第6章掌握CSS——选择器➕CSS的三大特性选择器(选择符)的作用是根据不同需求把不同的标签选出来。选择器分为5类，分

选择器(选择符)的作用是根据不同需求把不同的标签选出来。选择器分为5类，分别是基础选择器、复合选择器、属性选择器、伪类选择器以及伪元素选择器。

1 CSS基础选择器

基础选择器是由单个选择器组成的，分为4类，分别是标签选择器、类选择器、id 选择器和通配符选择器。

1.1 通配符选择器

概念：在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。
作用：可以选中所有的 HTML 元素。(包括<HTML>标签以及<body>标签)
语法：

实例：

场景：通配符选择器一般用于清除标签默认样式。

1.2 标签选择器

概念：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：为页面中某种元素统一设置样式。
语法：

实例：

特点：不能设计差异化样式，只能选择全部的当前标签。

1.3 类选择器

概念：类选择器是指通过指定类名作为选择器，单独选一个或者某几个标签，可以实现差异化选择不同的标签。
作用：根据元素的 class 值，来选中某些元素。
语法：

实例：

场景：修改页面中某个或某类指定的样式。

⚠注意

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到 “见名知意”。

一个元素的 class 属性，能写多个值，要用空格隔开。例如：<p class='speak answer>Hello,World！</p>'

一个元素不能写多个 class 属性

1.4 ID选择器

概念：ID选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
作用：根据元素的 id 属性值，来精准的选中某个元素。
语法；

实例：

场景：与JavaScript搭配使用

⚠ 注意

id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空格、区分大小写。

一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。

一个元素可以同时拥有 id 和 class 属性。

类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

1.5 基础选择器总结

2 CSS复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，以在复杂结构中，快速而准确的选中元素。复合选择器共有4类，分别为交集选择器、并集选择器、后代选择器、子代选择器以及兄弟选择器。

2.1 交集选择器

概念：交集选择器可以选择某个标签，为该标签定义不同样式。
作用：选中同时符合多个条件的元素。
语法：多个选择器紧密靠在一起，连接它们的关系是：与

实例：

场景：一个元素具有多种样式。

⚠ 注意：

有标签名，标签名必须写在前面。

id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。

交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。

用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2.2 并集选择器

概念：并集选择器被称为分组选择器，可以选择多组标签, 同时为他们定义相同的样式。
作用：为多组标签设置相同样式。
语法：多个选择器通过 , 连接，此处 , 的含义就是：或。

实例：

场景：通常用于集体声明。

⚠注意：

并集选择器，我们一般竖着写。

任何形式的选择器，都可以作为并集选择器的一部分。

并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 后代选择器

概念：后代选择器又称为包含选择器，可以选择父元素里面子元素。
作用：选中指定元素中，符合要求的后代元素。
语法：先写祖代选择器，再写后代选择器。

实例：

场景：处理文档关系。

⚠注意

后代选择器，最终选择的是后代，不选中祖先。

儿子、孙子、重孙子，都算是后代。

结构一定要符合 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

2.4 子代选择器

概念：子代选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
语法：先写父代选择器，再写子代选择器。

实例：

场景：处理文档关系。

⚠注意：

子代选择器，最终选择的是子代，不是父级。

子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

2.5 兄弟选择器

兄弟选择器分为相邻选择器与通用兄弟选择器两种。（简记：睡在我下铺的兄弟。）

（1）相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。
语法：

实例：

（2）通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟。）
语法：

实例：

⚠注意

两种兄弟选择器，选择的是下面的兄弟。

3 CSS属性选择器

作用：选中属性值符合一定要求的元素。
语法：

实例：

4 CSS伪类选择器

伪类选择器像类选择器，但不是类选择器，是选择特殊状态的元素的选择器，包括6个具体类别，分别为动态伪类选择器、结构伪类选择器、否定伪类选择器、UI伪类选择器、目标伪类选择器与语言选择器。

4.1 动态伪类选择器

作用：主要作用于鼠标点击的链接状态。
语法：

:link 超链接未被访问的状态。

:visited 超链接访问过的状态。

:hover 鼠标悬停在元素上的状态。

:active 元素激活的状态。
① 什么是激活？—— 按下鼠标不松开。
②遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。（a标签独有。）
③ 以点击“百度一下”链接为例：

未访问时：link | visited :访问过时

鼠标悬浮时：link hover | visited hover

元素激活时：link hover active | visited hover active

原理：选择同一个元素时，相同权值的选择器，后面的覆盖前面。

:focus 获取焦点的运算。
①表单类元素才能使用：focus伪类。
② 当用户点击元素、触摸元素、或通过键盘的tab键等方式，选择元素时，就是获得焦点。

实例：点击链接以及表单获取焦点案例。实际代码，如下所示：

<!DOCTYPE html>

<html lang="zh-CN">

<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>动态伪类选择器实例</title>

    <style>

        /* 未访问过链接的颜色为黄色 */

        a:link {

            color: yellow;

        }

        /* 访问过链接的颜色为灰色 */

        a:visited {

            color: gray;

        }

        /* 鼠标悬浮的链接颜色为蓝色 */

        a:hover {

            color: blue;

        }

        /* 鼠标点击的链接颜色为绿色 */

        a:active {

            color: green;

        }

        select:focus,

        input:focus {

            color: bisque;

            background-color: aqua;

        }

    </style>

</head>

<body>

    <a href="https://www.baidu.com">去百度</a>

    <a href="https://www.jd.com">去京东</a>

    <br>

    <input type="text">

    <br>

    <input type="text">

    <br>

    <input type="text">

    <br>

    <select name="from">

        <option value="0">广东</option>

        <option value="1">云南</option>

        <option value="2">福建</option>

    </select>

</body>

</html>

4.2 结构伪类选择器

常用的结构伪类

:first-child 所有兄弟元素中的第一个。

:last-child 所有兄弟元素中的最后一个。

:nth-child(n) 所有兄弟元素中的第 n 个。

:first-of-type 所有同类型兄弟元素中的第一个。

:last-of-type 所有同类型兄弟元素中的最后一个。

:nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

不常用的结构伪类

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个 。

:only-child 选择没有兄弟的元素（独生子女）。

:only-of-type 选择没有同类型兄弟的元素。

:root 根元素。

:empty 内容为空元素（空格也算内容）。

关于n的值

0 或 不写 ：什么都选不中 —— 几乎不用。

n ：选中所有子元素 —— 几乎不用。

1~正无穷的整数 ：选中对应序号的子元素。

2n 或 even ：选中序号为偶数的子元素。

2n+1 或 odd ：选中序号为奇数的子元素。

-n+3 ：选中的是前 3 个。

4.3 否定伪类选择器

语法：:not(选择器) 排除满足括号中条件的元素
实例：选择div的所有子元素p，排除p元素的父元素div元素的第一个元素，将其余的p元素背景色变成红色。实际代码，具体如下所示：

<!DOCTYPE html>

<html lang="zh-CN">

<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>03_否定伪类选择器</title>

    <style>

        div>p:not(:first-child) {

            background-color: red;

        }

    </style>

</head>

<body>

    <div>

        <span>短语1</span>

        <p>段落1</p>

        <p>段落2</p>

        <p>段落3</p>

        <p>段落4</p>

        <p>段落5</p>

        <p>段落6</p>

       <span>短语2</span>

    </div>

</body>

</html>

4.4 UI伪类选择器

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
:disabled 不可用的表单元素（有 disabled 属性）。

4.5 目标伪类选择器（了解）

语法：:target 选中锚点指向的元素，配合锚点使用。
实例：将所有跳转至指定的div盒子背景颜色设置为天蓝色。具体代码如下所示：

<!DOCTYPE html>

<html lang="zh-CN">

<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>02_目标伪类选择器</title>

    <style>

        div:first-of-type {
            margin-top: 10px;
        }

        div {
            height: 200px;
            margin: 10px auto;
            background-color: black;          
        }

        div:target {
            background-color: aqua;
        }

    </style>

</head>

<body>

    <a href="#map1">目标1</a>
    <a href="#map2">目标2</a>
    <a href="#map3">目标3</a>
    <a href="#map4">目标4</a>
    <a href="#map5">目标5</a>
    <a href="#map6">目标6</a>

    <div id="map1">结果1</div>
    <div id="map2">结果2</div>
    <div id="map3">结果3</div>
    <div id="map4">结果4</div>
    <div id="map5">结果5</div>
    <div id="map6">结果6</div>

</body>

</html>

4.6 语言伪类选择器（了解）

语法：:lang() 根据指定的语言选择元素（本质是看lang属性的值）。
实例：将所有的简体中文元素前景色设置为红色（给html设置了zh-CN，则html的子元素都为zh-CN）。具体代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>15_伪类选择器_语言伪类</title>
    <style>
        div:lang(en) {
            color: red;
        }
        /* 匹配所有简体中文的元素 */
        :lang(zh-CN) {
            color: green;
        }
    </style>
</head>
<body>
    <div>尚硅谷1</div>
    <div lang="en">尚硅谷2</div>
    <p>前端</p>
    <span>你好</span>
</body>
</html>

5 CSS选择器优先级

问题：通过不同的选择器，选中相同的元素时，若为相同的样式名设置不同的值时，就发生了样式的冲突。到底哪个样式优先级更高?

公式一：!import > style样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器（对于单个选择器与样式表）

公式二：对于复合选择器进行权值计算，如下图所示：

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比。

权值计算的案例，如下图所示：

6 CSS的三大特性

6.1 层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

为什么样式冲突？浏览器会将外部样式加载进当前文件，读取完当前所有选择器后，先比较权重，再比较顺序。

6.2 继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性： text-?? ， font-?? ， line-?? 、 color ......
备注：参照 MDN 网站，可查询属性是否可被继承。

6.3 优先级

简单聊： !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。
详细聊：需要计算权重。计算权重时需要注意：并集选择器的每一个部分是分开算的！

第6章 掌握CSS——选择器➕CSS的三大特性