CSS 第四天复合选择器、CSS特性、背景属性、显示模式

1 复合选择器

定义：由两个或多个基础选择器 通过不同的方式组合而成 。

作用：更准确、更高效的选择目标元素（标签）

1.1 后代选择器

后代选择器：会同时选中 某元素的所有后代元素
后代选择器写法：父选择器子选择器 { CSS 属性 } ，父子选择器之间用空格隔开。

1.2 子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器 > 子选择器器{CSS属性}，父子选择器之间用 > 隔开。

1.3 并集选择器

并集选择器：选中多组标签设置相同的样式。
选择器写法：选择器1，选择器2，.,选择器N{CSS属性}，选择器之间用，隔开。

1.4 交集选择器了解

交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号。

1.5 伪类选择器

伪类选择器：伪类表示元素**状态，**选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{CSS属性}

例如：鼠标划过的状态

1.5.1 伪类 - 超链接一般不用

超链接一共有四个状态：

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

注意：工作中，一般就只写 a { CSS 属性}，以及 a:hover{ CSS 属性

2 CSS 三大特性

2.1 继承性

继承性：子级默认继承父级的文字控制属性
注意：当标签有自己的样式，就不会继承父级的

一般会在 body 标签中统一设置，对于特殊的字体再单独写

2.2 层叠性

相同的属性会覆盖：后面的 CSS 属性覆盖前面的CSS属性
不同的 属性会叠加：不同的 CSS 属性都生效

2.3 优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
在属性后边加 !important 是直接提高到最高优先级慎用！

比如：

规则：选择器优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
选中标签的范围越大，优先级越低

html 复制代码

<!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>CSS特性：优先级</title>
    <style>
        /* 通配符选择器 */
        * {
            color: red !important;       /*  在属性后边加 !important 是直接提高到最高优先级 */
        }

        /* 标签选择器 */
        div {
            color: green;
        }

        /* 类选择器 */
        .box {
            color: blue;
        }

        /* id 选择器 */
        #test {
            color: orange;
        }
    
    </style>
</head>
<body>
    <!-- 行内样式：style="color:purple" -->
    <div class="box" id="test" style="color:purple">div 标签</div>
</body>
</html>