当前位置:首页 > 前端技术 > CSS层叠

CSS层叠

2022年09月16日 21:48:22前端技术8

前面的话

  层叠样式表CSS最基本的一个特性就是层叠。冲突的声明通过层叠进行排序,由此确定最终的文档表示。而这个过程的核心就是选择器及其相关声明的特殊性、重要性、来源及继承机制。本文将详细介绍CSS层叠

 

特殊性

  选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分(如:0,0,0,0)。下面来介绍不同的选择器的特殊性值

  1、内联样式 -> 1,0,0,0

  2、ID属性值 -> 0,1,0,0

  3、类属性值、属性选择或伪类 -> 0,0,1,0

  4、元素或伪元素 -> 0,0,0,1

  5、结合符和通配选择器 -> 0,0,0,0

  特殊性的值是从左向右排序的,特殊性值1,0,0,0大于以0开头的所有值,而无论后面是什么数。在一组规则中,特殊性最高的规则胜出

h1{} -> 0,0,0,1
p em{} -> 0,0,0,2
.grape{} -> 0,0,1,0
*.bright{} -> 0,0,1,0
p.bright em.dark{} -> 0,0,2,2
#id121{} -> 0,1,0,0
div#side *[href]{} -> 0,1,1,1

 

重要性

  有时某个声明可能非常重要,超过了所有其他声明,CSS2.1称之为重要声明。重要声明在声明的结束分号之前插入!important来标志,如果!important放在声明的任何其他位置,整个声明都将无效

  如果一个声明是重要声明,则超过所有的非重要声明

 

继承

  继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制,样式不仅可以应用到指定的元素,还会应用到它的后代元素

  在两个比较特殊的情况需要注意:一个是在HTML中,应用到body元素的背景样式可以传递到html元素;另一个是<a>标签不会继承父元素的文本样式

   [注意]继承的属性没有特殊性

 

来源

  CSS按来源的不同分为3类:author(作者)、user(用户)、user agent(代理)

  1、author(作者): 来自文档的样式文件。我们平常所写的样式基本上都是这一类的

  2、user(用户): 用户指定的自定义的样式文件。一些UA允许用户导入自定义的样式文件

  3、user agent(代理): 一些UA(如:浏览器)要为某些元素预设一个默认的样式,以方便阅读

  关于用户CSS因为不常见,可能一些朋友不太理解。IE可以通过Internet 选项 -> 外观 -> 辅助功能 -> 用户样式表来指定样式文件。Chrome可以使用Stylish扩展来实现

 

层叠

  CSS层叠样式表的层叠特性就是让样式层叠在一起,通过特殊性、重要性、来源及继承机制来排列层叠样式的顺序及选出胜出者

  1、首先,按照来源及重要性排序。在不考虑重要性的前提下,优先级顺序为:author(作者) > user(用户) > user agent(代理)。但是,如果考虑重要性,则user(用户)的优先级大于author(作者)的优先级,这样做是试图平衡author(作者)和user(用户)。所以,最终的优先级排序为:user(用户)!important > author(作者)!important > author > user > user agent

  2、接着,对于非重要声明来说,按照特殊性排序。特殊性越高的规则,权重越大

  3、最后,如果特殊性相同,则按照出现顺序排序。声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过@import导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后

作者:小火柴的蓝色理想
来源链接:https://www.cnblogs.com/xiaohuochai/p/4984509.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42131.html

标签: css
分享给朋友:

“CSS层叠” 的相关文章

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。