什么是CSS层叠,优先级规则是什么

自媒体 思享 283浏览
摘要:
Css本质上是一个语句规则,就是在各种条件下,我们想要产生一个特定的效果。浏览器将根据我们编写的规则决定如何呈现页面。层叠是指CSS中的一系列规则,决定了如何解决冲突,是CSS语言的基础。重要的语句会作为优先级较高的来源,所以整体优先级是从高到低的!重要>作者样式表>用户代理样式表。表示优先级的一种常见方式是用数字形式标记,通常用逗号分隔每个数字。

CSS本质

CSS 本质上就是声明规则,即在各种条件下,我们希望产生特定的效果.浏览器会根据我们书写的规则去决定如何渲染页面.

什么是层叠

层叠指的就是css中的一系列规则.决定了如何解决冲突,是 CSS 语言的基础.

层叠规则

这些规则就是拿来解决冲突的.

  1. 样式表的来源:样式是从哪里来的,包括你的样式和浏览器默认样式等.
  2. 选择器优先级:哪些选择器比另一些选择器更重要.
  3. 源码顺序:样式在样式表里的声明顺序

术语解释

@规则(at-rules)是指用"@"符号开头的语法.比如@import 规则或者@media 查询

样式表的来源

作者样式表

我们自己写的样式表就是作者样式表

用户代理样式表

浏览器有一个默认的样式表,也就是用户代理样式表.

用户样式表

这是第三种来源,它的优先级介于 用户代理样式表和作者样式表之间.用户样式表很少见,并且不受网站作者控制,因此 这里略过

1. 用户代理样式

浏览器先应用用户代理样式后才会应用作者样式表,后者会覆盖前者.

2. !important 声明

标记了!important 的声明会被当作更高优先级的来源,因此总体的优先级按照由高到低优先级分别是 !important > 作者样式表 > 用户代理样式表

理解优先级

1.行内样式

在HTML 的 style 属性直接写样式,优先级最高,覆盖任何来自样式表或者<style>标签的样式.

2. 选择器优先级

有3大类选择器.他们有不同的优先级.

如果选择器的 ID 数量更多,则它会胜出(即它更明确).

如果 ID 数量一致,那么拥有最多类的选择器胜出.

如果以上两次比较都一致,那么拥有最多标签名的选择器胜出.

口诀是遇同级比数量,遇不同级,找高级,全一样,看先后,后者胜.

3. 优先级标记

一个常用的表示优先级的方式是用数值形式来标记,通常用逗号隔开每个数.

"1,2,2" 表示选择器由 1 个 ID、2 个类、2 个标签组成.

有3数和4个数的写法.4个数的写法多了一个数表示代表一个声明是否 是用行内样式添加的.用0,1表示.

源码顺序

如果两个声明的来源和优先级相同,其中一个 声明在样式表中出现较晚,或者位于页面较晚引入的样式表中,则该声明胜出.

a链接属性书写顺序

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: red;
}

两条经验法则

1.能不用!important就不用。

2.在选择器中不要使用 ID

推荐阅读

右侧固定宽度,左侧自适应两栏布局

最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是......

css3怎么实现文字闪烁效果

如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。...

纯css实现轮播和点击切换效果(无JS)

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的......