css三大特性

最新推荐文章于 2024-06-23 16:20:48 发布

黄昏终结者

最新推荐文章于 2024-06-23 16:20:48 发布

阅读量696

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_62181310/article/details/123934642

版权

本文详细介绍了CSS中的继承性、层叠性和优先级概念。继承性允许子元素继承父元素的一些样式，如颜色、字体等；层叠性则规定了当样式冲突时，后定义的样式会覆盖前面的；优先级是解决冲突的关键，通过计算选择器权重来决定哪个样式生效。文章通过实例展示了这些原理，并探讨了权重的计算方式和应用。

摘要由CSDN通过智能技术生成

一、继承性

子元素会继承父元素的某些样式

主要是文本类的样式可以继承:

属性:color、text-indent、text-align、font-style、font-weight、font-size、 font-family、line-height

注:a标签不会继承父元素的文字颜色,h1-h6标题标签不会继承父元素的字体大小

样式:
        .box {
            height: 100px;
            width: 100px;
            font-size: 30px;
            color: cadetblue;
            line-height: 50px;
            text-decoration: underline;
        }
内容:
    <div class="box">
        <p>牛肉</p>
        <span>火腿</span>
    </div>

二、层叠性

样式发生冲突的时候,后边的样式会覆盖(层叠)前边的样式,就近原则

注:连写的时候,不写的值取默认值,背景颜色默认透明,行高不写,取默认值normal

.box {
      font-size: 50px;
      color: yellow;
      color: red;
}

三、优先级

优先级是css解决样式冲突的一种能力,样式冲突的时候,优先级高的选择器,优先生效,权重是优先级的具体表

公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
0,0,0,0 0,0,0,1 0,0,1,0 0,1,0,0 1,0,0,0 无穷大

样式:
<style>
        div {
            color: aquamarine !important;
        }
        .box {
            color: chocolate;
        }
        #nav {
            color: darkslategray;
        }
    </style>
内容:
<body>
    <div class="box" id="nav" style="color: blueviolet;">优先级</div>
</body>

四、权重

继承性,子元素和父元素的样式没有冲突,子元素会继承父元素的某些样式
子元素和父元素的样式冲突,永远执行子元素的样式,继承权重为0
#box对于span标签来说,是父元素的样式,对于span来说权重为0,0,0,0
span标签选择器，对于span来说，权重是0,0,0,1

<style>

    #box {
        font-size: 50px;
        color: blueviolet;
    }
    span {
        font-size: 24px;
        color: green;
    }
    </style>
</head>
<body>
    <div id="box">
        <span>继承性</span>
    </div>
</body>

选择器选择的是相同的标签,权重会叠加

    <style>
        ul {
            color: brown !important;
        }
        /* 0,0,0,1 */
        li {
            font-size: 24px;
            color: #ccc;
        }
        /* 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .box li {
            color: cadetblue;
        }
        /* 0,1,0,0 + 0,0,0,1 = 0,1,0,1 */
        #nav li {
            color: darkorange;
        }
    </style>
</head>
<body>
    <ul class="box" id="nav">
        <li>权重</li>
    </ul>
</body>

黄昏终结者

关注

1
点赞
踩
0

收藏

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

一、继承性子元素会继承父元素的某些样式主要是文本类的样式可以继承:属性:color、text-indent、text-align、font-style、font-weight、font-size、 font-family、line-height注:a标签不会继承父元素的文字颜色,h1-h6标题标签不会继承父元素的字体大小样式: .box { height: 100px; width: 100px;
复制链接

扫一扫