CSS 的继承、层叠和特殊性[修改版]

最新推荐文章于 2024-01-29 15:07:41 发布

季诗筱

最新推荐文章于 2024-01-29 15:07:41 发布

阅读量1k

点赞数

分类专栏： css 文章标签： CSS 优先级

本文链接：https://blog.csdn.net/XIAOZHUXMEN/article/details/50835289

版权

css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

今天在看《HTML5与CSS3权威指南》，编写代码来验证background-origin，却出现了一个问题。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>background的新增属性</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #box{
            width: 340px;
            height: 340px;
            border: 30px solid rgba(200,200,200,0.5);
            padding: 30px;
            margin: 40px;
            background: orange url(images/bg.jpg) no-repeat top left;                   
        }
        .border-box{
            -webkit-background-origin: border-box;
            -moz-background-origin: border-box;
            -o-background-origin: border-box;
            -ms-background-origin: border-box;
            background-origin: border-box;          
        }
        .content-box{
            background: orange url(images/bg.jpg) no-repeat top left;

            background-origin: content-box;
        }

    </style>
</head>
<body>
    <div id="box" class="border-box"></div>
</body>
</html>

出现的问题就是，我无论是把div的class设成border-box还是content-box，页面都是没有任何反应的。我从chrome里面检查，发现

class样式是失效的！

问了一下师父，他说你去看一下，css的特殊性。然后推荐了一本书《CSS商业网站布局之道》修改：这本书中的部分介绍是错误的！！！。仔细看了书之后，就完全明白了。因为id的优先级比class高，而#box里面包含了background属性，这个属性集成了其他的background属性，而且background-origin默认就是 padding-box！，所以.border-box里面再设置就没有作用了。

下面把CSS的继承、层叠和特殊性总结一下

1、继承
子元素会继承父元素的属性，但是以下属性除外：

边框属性
边界属性
补白属性
背景属性
定位属性
布局属性
元素宽高属性

2、层叠
       CSS全称为Cascading Style Sheets。层叠是指CSS能够对同一个元素或者同一个网页应用多个样式或多个样式表的能力。
     重要度：
      作者定义的样式表>用户定义的样式表>浏览器的预定义样式。
如：浏览器默认字体样式为宋体（浏览器样式），你通过修改浏览器的设置改为黑体（用户定义样式），现在，你打开的网页中自带一个样式表字体为幼圆（作者定义样式），则最终页面文字显示为幼圆。

如果想要提高样式的重要度，则需要使用！important，使他优于任何其他规则。

3、特殊性

样式优先级别：
id：100；class：10；元素：1

EX.

div{ /*特殊性加权值=1*/
    color: black;
}
div h2{ /*特殊性加权值=1+1=2*/
    color: red;
}
.blue{ /*特殊性加权值=10*/
    color: blue;
}
div.blue{ /*特殊性加权值=1+10=11*/
   color:blue
}
div.blue .dark{ /*特殊性加权值=1+10+10=21*/
    color: #eee;
}
#yellow{ /*特殊性加权值=100*/
    color: yellow;
}
#yellow span{ /*特殊性加权值=100+1=101*/
    color: white;
}

另外，内联样式优先；相同特殊性下，CSS遵循就近原则，排在后面的优先级更大。

这部分是错的！优先级不是这样子算的！！！正确的优先级补在下面

id 选择器 #：1-0-0
class选择器 ：0-1-0
元素选择器：0-0-1
*：0-0-0
属性选择器：0-1-0
伪类选择器：0-1-0
内联样式：1-0-0-0
！important：1-0-0-0-0

在同一个优先级的可以叠加，比如，两个id选择器，一个class选择器，那么优先级就是： 2-1-0

可以仔细看下面的图
这里写图片描述

参考博文：张鑫旭大神有趣：256个class选择器可以干掉1个id选择器

季诗筱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS 的继承、层叠和特殊性[修改版]

今天在看《HTML5与CSS3权威指南》，编写代码来验证background-origin，却出现了一个问题。我的代码如下：<!DOCTYPE html><html><head> <title>background的新增属性</title> <meta charset="utf-8" /> <style type="text/css"> #box{
复制链接

扫一扫

专栏目录