css三大特性

Liuzhengyue_

已于 2024-04-14 01:27:45 修改

阅读量441

点赞数 5

文章标签： css 前端

于 2024-04-14 01:26:49 首次发布

本文链接：https://blog.csdn.net/Liuzhengyue_/article/details/137729760

版权

1. 层叠性（Cascading）

层叠性是CSS的核心特性之一。在网页中，可能会同时应用多个样式表，包括用户自定义样式表、浏览器默认样式表和开发者提供的样式表。层叠性规定了不同样式表之间的优先级和应用顺序，最终确定了每个元素应用的样式。具体来说，层叠性遵循一套规则，如样式表来源、选择器特异性和样式表中的顺序等，以确定最终样式的计算结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css特性</title>
    <style>
        div{
            color: aqua;
            font-size: 32px;
        }
        div{
            color: blueviolet;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>我是div标签</div>
</body>
</html>

特点：

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

2. 继承性（Inheritance）

继承性是指子元素可以继承父元素的样式。在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>
    body{
        font-size:32px;
        font-weight: 400;
        color: blueviolet;

    }
    </style>
</head>
<body>
    <p>p标签</p>
    <div>div标签</div>
    <a href="#">超链接</a>
    <!-- 标签的颜色无法改变，因为他本身自带有颜色属性 -->
</body>
</html>

3. 优先级（Specificity）

优先级规定了当多个样式规则应用于同一个元素时，哪些规则具有更高的优先级。优先级由选择器的特异性（Specificity）决定，特异性高的选择器具有更高的优先级。通常，选择器的特异性由选择器本身的类型、类、ID等决定。在CSS中，通过计算选择器的特异性，可以确定最终应用于元素的样式规则。

优先级：也叫权重，当一个标签使用多种选择器时，基本不同类型的选择器的匹配规则。

规则：选择器优先级搞的样式生效

公式：通配符<标签选择器<类选择器<id选择器<行类样式<!important(选中标签的范围大，优先级越低)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css优先级</title>
    <style>
        div{
            font-size: 32px;
            color: brown;
        }
        #two{
            /* 最终为这个样式效果 */
            color: blue;
            font-size: 50px;
        }
        .one{
            color: cadetblue;
            font-size: 20pxS;
        }
    </style>
</head>
<body>
    <div class="one" id="two">div标签</div>
</body>
</html>

优先级-叠加计算规则

叠加计算：如果是复合选择器，则需要圈重叠加计算

公式（每一级之间不存在进位）

（行类样式，id选择器个数，类选择器个数，标签选择器个数）

规则：

从左到右依次比较选个数，同一级个数多的优先级高，如果相同，则向后比较
！important权重最高
继承权重最低

这三大特性共同构成了CSS样式表的基本工作原理，帮助开发者有效地管理和应用样式，实现对网页外观的精确控制。

Liuzhengyue_

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
css三大特性

层叠性规定了不同样式表之间的优先级和应用顺序，最终确定了每个元素应用的样式。具体来说，层叠性遵循一套规则，如样式表来源、选择器特异性和样式表中的顺序等，以确定最终样式的计算结果。优先级由选择器的特异性（Specificity）决定，特异性高的选择器具有更高的优先级。在CSS中，通过计算选择器的特异性，可以确定最终应用于元素的样式规则。在CSS中，某些样式属性（如字体样式、颜色等）会被子元素继承自其父元素，除非子元素明确地重写了这些属性。通过继承性，可以减少重复的样式定义，提高代码的可维护性。
复制链接

扫一扫