学堂学堂学堂公众号手机端

css - 02css权重

lewis 1年前 (2024-03-22) 阅读数 5 #技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css权重</title>
</head>
<style>
    /*权重*/
    /*多个样式作用在一个元素上，样式冲突时就会产生样式优先级权重问题*/
    /*id选择器          0100*/
    /*class、属性选择器  0010*/
    /*标签、伪类选择器    0001*/
    /*通配符(*)         0000*/
    /*行内样式          1000*/
    /*!important      强制使用样式，优先级最高*/

    /*继承*/
    /*子元素可以继承父元素设置的样式，遵循就近原则*/
    /*子元素并不是继承全部样式。比如边框、高度等并不会继承*/
    /*继承的规则没有权重 NULL*/
    /*子元素定义样式时继承被打破，以子元素定义的样式为准*/

    /*权重示例*/
    /*11*/
    body .color {
        color: red;
    }

    /*20*/
    .color[name] {
        color: green;
    }

    /*继承和通配符(*)的比较*/
    /*0*/
    /** {*/
    /*    color: red;*/
    /*}*/
    /*1 推荐使用*/
    html {
        color: red;
    }

    /*1*/
    h3 {
        color: blue;
    }

</style>

<body>
<!--权重示例-->
<h2 name="hhe" class="color" id="hot">HDCMS</h2>

<!--继承和通配符(*)的比较-->
<article>
    <h3>
        hdcms
        <span>内容管理系统</span>
    </h3>
</article>

</body>
</html>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：倒排索引是一种数据结构，用于快速查找文档中包含某个特定词语的所有文档下一篇：每个程序员都应该知道的 Swoole 知识 - 定时器