CSS3系列 03 属性继承

最新推荐文章于 2022-06-10 17:41:35 发布

云崖先生

最新推荐文章于 2022-06-10 17:41:35 发布

阅读量162

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_43422005/article/details/118926137

版权

CSS3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

选择器优先级

不同的选择器具有优先级，如果一个元素同时被多个选择器所选择且设置了同名样式时，它会按照优先级来判定应用哪一个选择器的样式。

如果优先级相同，则下面的选择器生效，常见优先级示例：

行内式渲染：1000
id选择器：100
class选择器：10
name选择器：1

当使用组合选择器时，优先级会进行累加，如下所示：

<!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>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        /* 有同名属性时会根据优先级排定应用哪一个属性 */
        h1 {
            /* 优先级 = 1 */
            color: blue;
            background-color: red;
        }

        h1#title {
            /* 优先级 = 1 + 100 */
            color: white;
        }
    </style>
</head>

<body>
    <h1 id="title">HELLO WORLD</h1>
</body>

</html>

最终结果，同名属性color会渲染为第二个选择器：

!important

我们可以使用!important关键字来强制更改优先级，让其优先级变的无限高。

有2个需要注意的地方：

如果同名样式都设置成!important，则!important带来的优先级提升会相互抵消，依旧按照选择器优先级来选择最终样式的渲染
如果2个同名样式的选择器优先级相同，还是按照后者覆盖前者的特性进行渲染

所以说，!important不能滥用，大量使用!important可能导致你代码可读性变差：

<!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>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        /* 有同名属性时会根据优先级排定应用哪一个属性 */
        h1 {
            /* 优先级 = 1 + 无限 */
            color: blue !important;
            background-color: red;
        }

        h1#title {
            /* 优先级 = 1 + 100 */
            color: white;
        }
    </style>
</head>

<body>
    <h1 id="title">HELLO WORLD</h1>
</body>

</html>

最终结果：

属性继承

对于子标签来说，其父级别或更高级别标签的某些样式是可以被继承的，如：

颜色相关样式
字体相关样式
文本相关样式

但是对于盒模型中的一些属性，如内外边距、浮动等是不能被继承的。

继承而来的属性无限趋于0，可直接被替换掉，并且不能使用!important来提升被继承属性标签的优先级，!!mportant只能影响自身。

如下所示，当div的background-color设置为red，color设置为white后，其内部嵌套标签也会继承到这些属性：

<!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>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div{
            background-color: red;
            color: wheat;
        }
    </style>
</head>

<body>
    <div>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
    </div>
</body>

</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>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div{
            background-color: red;
            color: wheat;
        }
        div :nth-child(odd){
            background-color: blue;
        }
    </style>
</head>

<body>
    <div>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
    </div>
</body>

</html>

渲染结果：

云崖先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3系列 03 属性继承

选择器优先级不同的选择器具有优先级，如果一个元素同时被多个选择器所选择且设置了同名样式时，它会按照优先级来判定应用哪一个选择器的样式。如果优先级相同，则下面的选择器生效，常见优先级示例：行内式渲染：1000id选择器：100class选择器：10name选择器：1当使用组合选择器时，优先级会进行累加，如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫

专栏目录