CSS的继承性和选择器优先级

Bulut0907

已于 2022-04-19 18:15:01 修改

阅读量1.2k

点赞数

分类专栏： CSS3 文章标签： css 继承性选择器优先级 css3 web前端

于 2022-01-23 21:39:20 首次发布

本文链接：https://blog.csdn.net/yy8623977/article/details/121725135

版权

CSS3 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1. 继承性

子元素可以继承父元素中以text- 、font- 、line- 开头和color样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            text-decoration: underline;
            color: red;
        }

    </style>

</head>
<body>

<div>
    <P>段落一</P>
    <a href="#">链接一</a>
</div>

</body>
</html>

浏览器默认给所有a标签指定了文字颜色为蓝色、文字带下划线的样式，比继承的优先级要高
如果父元素的line-height的值为文字大小的倍数，则子元素继承的line-height也是文字大小的倍数

显示效果如下：
继承性

2. 优先级

各选择器的权重如下：

选择器	权重
继承或者 *	0, 0, 0, 0
元素选择器	0, 0, 0, 1
类选择器、伪类选择器	0, 0, 1, 0
id选择器	0, 1, 0, 0
行内样式 style = “”	1, 0, 0, 0
important	无穷大

权重的比较是从左往右比较，左边能比较出大小，就不再往右比较

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        li {
            color: red !important;
        }

        .first-project {
            color: yellow;
        }
        
    </style>

</head>
<body>

<ul>
    <li class="first-project">项目一</li>
    <li style="color: pink;">项目一</li>
    <li>项目一</li>
</ul>

</body>
</html>

显示效果如下：
优先级

2.1 复合选择器权重相加

对于复合选择器，权重是可以相加的，相加只能原位相加，不进位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        .first-project {
            color: yellow;
        }

        ul li {
            color: red;
        }

    </style>

</head>
<body>

<ul>
    <li class="first-project">项目一</li>
    <li>项目一</li>
    <li>项目一</li>
</ul>

</body>
</html>