【三】CSS之样式的优先级

1 css样式的优先级

css在使用过程中，因为很多的选择符有具有批量查找的特点，所以很容易出现样式污染的问题。
样式污染出现的原因是因为css代码编写过程中，因为引入方式、书写先后顺序以及选择符的优先级等问题导致的。
注意：样式污染并非不好，而是要可控！

2 引入方式的优先级

针对css中的代码，使用不同的引入方式，会存在不同的优先级问题。
三种引入方式中，
- 行内样式的权重是最高的，比另外两种都要高。
- 内部样式与外部样式权重是一样的，
所以只要css不是行内样式，
- 不管是外部还是内部样式的使用过程中，
- 写在后面的css代码，会覆盖前面的写的css代码。
其中，如果在样式属性值后面加上!important，则表示无视权重，优先使用当前属性值作为最终的展示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="9.1.css">
    <style>
    .p1, .p2{
        color: red;
    }
    .p3{
        color: blue!important; /* 让css无视权重，使用当前属性值作为最终展示效果。 */
    }
    </style>
    <link rel="stylesheet" href="9.2.css">
</head>
<body>
    <p class="p1">第1个p标签</p>
    <p class="p3" style="color: orange;">第2个p标签</p>
    <p class="p2">第3个p标签</p>
    <p class="p3" style="color: orange;">第4个p标签</p>
</body>
</html>

2.1.css，代码：

.p1 {color: yellow;}

2.2.css，代码：

.p2 {color: yellow;}

在css使用过程中，浏览器本身对于HTML元素的外观实际上是预设了一些默认样式的。

这些样式存在了user agent stylesheet。

所以实际上，user agent stylesheet提供的样式才是权重最低的。

所以也是因为浏览器本身对于不同的HTML元素内部预设一些默认外观效果，

所以w3c又针对这种情况，又提供了2个纯净标签，是几乎没有任何内置样式的：div、span。

其中，div标签代表网页的一个板块，自带换行效果。

span标签代码的是文本的一部分内容，所以不会自动换行，也没有任何外观样式。

div+span+css往往用于网页的排版布局。

3 选择符的优先级

当css代码采用外部样式或者内部样式时，针对同一个元素使用不同的选择符，也会存在优先级的比较，容易导致样式污染的问题。

3.1 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 通配选择符的优先级比类型选择符的要低 */
    *{
        text-decoration: none;
        color:red;
    }
    p{
        color: blue;
    }
    /*
    子选择符与包含选择符 比 类型选择符的优先级要高。
    子选择符与包含选择符的优先级一样的，嵌套层级一样时，谁写在后面，就优先显示谁
    如果嵌套不一样，则嵌套层级越多的，优先级越高。
     */
    b {
        background-color: red;
        color: white;
    }

    body>p>b{
        background-color: green;
        color: red;
    }
    p b {
        background-color: blueviolet;
        color: pink;
    }

    /* 类选择符的优先级比包含选择符或子选择符的优先级要高 */
    .p3{
        background-color: yellow;
    }

    body p {
        background-color: blue;
    }

    /* 属性选择符与类选择符的优先级是一样的。 */
    [type=text]{
        border: 1px solid blue;
    }
    .input{
        border: 1px solid red;
    }

    /* 所有的选择符中，ID选择符的优先级最高！ */
    </style>
</head>
<body>
    <a href="">超链接</a>
    <p class="p1"><b>第1个p标签</b></p>
    <p class="p3"><b>第2个p标签</b></p>
    <p class="p2">第3个p标签</p>
    <p class="p3">第4个p标签</p>

    <input class="input" type="text" value="请输入昵称"><br><br>
    <input class="input" type="text" value="请输入账号"><br>

</body>
</html>