前端学习 -- CSS基础 --CSS 选择器和层叠式

一、CSS 选择器

在内嵌式和外部 css 中，要想将 css 样式应用于特定的 html元素，首先需要找到该目标元素，这时需要用到 css 中的选择器

选择器

选择器：选择要添加样式的 html 标签的一种方法、模式
首先学习 css2.1 版本的七种选择器：
- 基础选择器：标签选择器、id 选择器、类选择器、通配符选择器
- 高级选择器：后代选择器、交集选择器、并集选择器

标签选择器

通过标签名去选择标签元素
书写方式：标签名
选择范围：选中的是 HTML 文件中所有的同名标签
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 标签选择器 </title>
    
    <style>
        
        p {
            color: red;
        }

        h3 {
            color: burlywood;
        }

    </style>

</head>
<body>

    <h3> 三级标题 </h3>
    <p> 这是一个段落 </p>
    <h3> 三级标题 </h3>
    <p> 这是一个段落 </p>

</body>
</html>

标签选择器特点

优点：可以选中所有的同名标签，设置所有同名标签的公共样式
缺点：只能实现全选，不能对局部的标签添加特殊样式

id 选择器

通过标签上的 id 属性去选择标签
书写方式：#id 属性值
选择范围：只能选中一个标签
id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名
注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> id 选择器 </title>
    
    <style>

        #p1 {
            color: chartreuse;
        }

    </style>

</head>
<body>

    <h3> 三级标题 </h3>
    <p> 这是一个段落 </p>
    <h3> 三级标题 </h3>
    <p id="p1"> 这是一个段落 </p>

</body>
</html>

缺点：id 选择器只能实现单选，不能帮我们完成多选的功能

类选择器

通过标签的 class 属性去选择标签
书写方式：.class 属性值
选择范围：是页面中所有 class 属性值相同的标签
class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class 相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 类选择器 </title>
    
    <style>

        .demo{
            color: red;
        }
        .z {
            font-size: 32px;
        }

    </style>

</head>
<body>

    <h3 class="demo z"> 三级标题 </h3>
    <p class="demo"> 这是一个段落 </p>
    <h3 class="demo"> 三级标题 </h3>
    <p class="demo z"> 这是一个段落 </p>

</body>
</html>

类选择器特点

多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中
一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签

类选择器的特殊应用

原子类：在 css 中提前设置一些类名，每个类选择器后面只添加一条 css 样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 类选择器 </title>
    
    <style>
        /* 提前设置一些原子类 */
        .fs12 {
            font-size: 12px;
        }

        .fs24 {
            font-size: 24px;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }

    </style>

</head>
<body>

    <p class="fs24 red" > 这是一个段落1 </p>

    <p class="fs12 blue" > 这是一个段落2 </p>

</body>
</html>

类选择器的优点

通过一个类选择器进行多选，选中多个标签，添加公共样式
一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量

实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)

通配符选择器

通过一个特殊符号选择页面内所有的标签
书写方式：*
选择范围：包含 < html > 标签在内的所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 通配符选择器 </title>
    
    <style>
        
        * {
            color: red;
            margin: 0;  /* 外边距 标签与标签之间的间距 */
            padding: 0;  /* 内边距 标签内部边距 */
        }

    </style>

</head>
<body>
    <h3> 三级标题 </h3>
    <p> 这是一个段落1 </p>
    <h3> 三级标题 </h3>
    <p> 这是一个段落2 </p>

</body>
</html>

通配符特点和应用

优点：可以实现全选，简化书写
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意：实际上线的网站不允许使用 * 去清除默认内外边距
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符

后代选择器

通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器
后代选择器也叫包含选择器
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签
注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 后代选择器 </title>

    <style>
        
        .div1 ul li p {
            color: red;
        }

        .div2 ul li p {
            color: blue;
        }
        
    </style>

</head>
<body>

    <div class="div1">
        <ul>
            <li> 
                <p> 第一个呀 </p>
            </li>
            <li> 标签 </li>
        </ul>
    </div>

    <div class="div2">
        <ul>
            <li>
                <p> 第二个呀 </p>
            </li>
        </ul>
        <p> 段落 </p>
    </div>

</body>
</html>

后代选择器优点：减少 class 属性的定义使用，选择效率更高

交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中
比较常见的是标签与类的交集

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 交集选择器 </title>

    <style>
        p.demo.ps {
            color: red;
        }
    </style>

</head>

<body>

    <p class="ps"> 第一个呀 </p>
    <p class="demo"> 第二个呀 </p>
    <p class="demo ps"> 第三个呀 </p>

</body>

</html>

IE6 不支持类名连续交集写法，交集选择器可以作为其他高级选择器的组成部分

并集选择器

不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法
书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号
选择范围：是所有的单独选择器选中的标签的并集集合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 并集选择器 </title>

    <style>
       h1, h2, .demo, p, ul { 
           color: red; 
           margin: 0; 
           padding: 0; 
        }
    </style>

</head>

<body>
    <h1> 一级标题 </h1>
    <h2> 二级标题 </h2>
    <h3 class="demo"> 三级标题 </h3>
    <p> 一个段落 </p>
    <ul>
        <li> 一个标签 </li>
    </ul>

</body>

</html>

并集选择器用途

如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法
可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能

二、CSS 层叠式

CSS 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性

继承性
层叠性

继承性

如果一个标签没有设置过一些样式，它的某个组先级曾经设置过，在浏览器中该标签也加载了这些样式，都是从祖先级继承来的
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 继承性 </title>

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            color: red;
            font-family: "楷体";
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <p>文字</p>
    </div>
</body>

</html>

继承性应用

继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>，后期所有的后代标签都可以从 <body> 进行继承

body {
            font-size: 14px;
            font-family: "楷体";
            color: sandybrown;
        }

层叠性

选中目标标签

第一步比较多个选择器的权重，权重高的层叠权重低的
基础选择器的权重：根据选择范围，范围越大权重越小， * < 标签选择器 < 类选择器 < id 选择器
高级选择器的权重：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不在比较后面，如果前面相等就往后比较，直到比较出大小
比较顺序： ( id 个数，类的个数，标签的个数 )
第二步如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 层叠性 </title>

    <style>
        /* 
            结果为 蓝色 
            p {
                color: royalblue;
            }

            * {
                color: red;
            }

            .demo {
                color: orange;
            }

            #ps {
                color: blue;
            } 
        */

        /*  
            结果为 橙色
            body p {
                color: red;
            }
            .demo {
                color: blue;
            }
            #ps.demo {
                color: orange;
            }
        */
        /* 
            颜色为黄色 离得近优先
            .box1 #box2 .box2 .demo {
                color: red;
            }

            .box1 .box2 #box3 .demo {
                color: yellow;
            } 
        */

        #box1 .box2 .demo,
        .box1 #box2 #ps {
            color: red;
        }

        .box1 .box2 #box3 .demo {
            color: blue;
        }
    </style>
</head>

<body>

    <!-- <p class="demo" id="ps"> 颜色文字是什么样的？ </p> -->

    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps"> 颜色文字是什么样的？ </p>
            </div>
        </div>
    </div>


</body>

</html>

选中目标标签的组先级

如果选择器选中的是祖先元素，文字的样式可以被继承
第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 层叠性 </title>

    <style>
     /* 选中的是目标的祖先级，文字样式被继承，也会出现层叠 */
     /* 第一步 */
     #box1 {
         color: red;
     }
     .box2 {
         color: green;
     }
     .box3 {
         color: blue;
     }

    </style>
</head>

<body>

    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps"> 颜色文字是什么样的？ </p>
            </div>
        </div>
    </div>


</body>

</html>

第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的
第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的

! important 关键字

如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以某条 CSS 样式属性的权重提升到最大
书写位置：在某个css属性的属性值后面空格加 !important

<style>
     
     /* 如果遇到 important,在判断权重过程中，会将某条属性的权重提升到最大 */
     #box3 {
         color: blue !important;
     }
     
     #box2 .box3 {
         color: red;
     }

</style>

注意：
- 就近原则中，不需要比较选择器权重，所有 important 会失效
- important 不能提升选择器的权重，只能提升某条属性的权重到最大

<style>
     
     #box2 {
         color: blue !important;
     }
     
     #box2 .box3 {
         color: red;
     }
</style>

行内式权重

行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高
但是，与 !important 关键字相比权重要低

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 层叠性 </title>

    <style>
        /* 行内样式的权重最高，但是低于 important */
        /* 不加 important 显示的为 蓝色  */
        /* #box1 .box2 .demo, .box1 #box2 #ps {
            color: red;
        } */
        #box1 .box2 .demo,
        .box1 #box2 #ps {
            color: red !important;
        }
    </style>
</head>

<body>

    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps" style="color: blue"> 颜色文字是什么样的？ </p>
            </div>
        </div>
    </div>

</body>

</html>

前端学习 -- CSS基础 --CSS 选择器 和 层叠式