CSS样式层叠和特殊性

层叠

同一个元素可以设置多个样式,就会有冲突,用层叠来解决样式冲突;

层叠给每个规则设置了重要度:

  1. 标有 ! important用户样式;
  2. 标有!important作者样式;
  3. 作者样式;
  4. 用户样式;
  5. 浏览器样式。

特殊性:

特殊性决定样式次序,具有特殊性的规则优于一般选择器。特殊性相同,位于后者的规则胜出。给每个规则分配一个数字,将数字加在一起,就是样式的特殊性。特殊性的计算不以10为基数,一个规则的选择器往往少于10个,以10基数比较特殊性更为方便些。

选择器的特殊性分为4个等级:

选择器 a b c d 10进制
行内样式 style="" 1 0 0 0 1000
ID选择器  #container{} 0 1  (ID选择器的总数) 0 0 0100
类、伪类、属性选择器 0 0 1(类、伪类、属性选择器 的总数) 0 0010
元素选择器、伪元素选择器 0 0 0 1(元素选择器、伪元素选择器 ) 0001
通用选择器 0 0 0 0 0000

如果某个样式没有起作用,很可能是特殊性出现冲突。就在规则添加父元素ID,提高特殊性。就很快定位冲突的规则。尽量保持一般性样式非常一般,特殊性样式非常特殊,就不容易发生特殊性冲突了。

继承:后代元素继承父级元素的某些属性。 如颜色、字号。继承而来的特殊性为0。

元素的样式和父元素一样,那么把样式应用到父级元素更为简洁。

eg p,div,h1,h2,h3,ol,ul,li{color:black} → body{color:black}

时间: 2024-07-28 12:54:13

CSS样式层叠和特殊性的相关文章

深入解析CSS样式层叠权重值(转)

前言:折腾了半天圆角,发觉border-radius是css3的新特性,简单粗暴的解决了button的圆角显示,中间由于css权重问题,导致即使我设置了圆角也一直没有生效.以下是找到的相当不错的一篇css样式权重讲解的,清晰明了,看完就懂是啥了. 永记在心: important > 内联 > ID > 类|属性|伪类 > 标签|伪元素  > 通配符 > 继承  (相对于原文的调整  属性选择和为对象均与类并列~) 简单记住这几个就够用了: important >

深入解析CSS样式层叠权重值

本文为转载内容,源地址:http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到<重新认识CSS的权重>这篇,在文章最后给出了便于记忆的顺序: “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”. 那么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很

CSS中继承,特殊性,层叠与重要性

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: <html><head> <style> p{border:1px solid red} </style> </head> <body> <p>123<span>123</span>123</p> </body> </h

CSS具有继承性、特殊性、层叠性和重要性

1. 继承性 CSS的某些样式是具有继承性的,那么什么是继承呢? 继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代. 比如下面代码:如某种颜色应用于 p 标签,这个颜色设置不仅应用 p 标签,还应用于 p 标签中的所有子元素文本,这里子元素为 span 标签.   <span style="font-size: 18px;">p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span

html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签.p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p>可见右侧结果窗口中p中的文本与span中的文本都设置为了红色.但注意有一些css样式是不具有继承

css的继承、层叠和特殊性

1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border:1px solid red; 2,特殊性  有的时候我们为同一个元素设置了不同的css样式代码,那么元素会启用哪一个css样式呢?浏览器是根据权值来判断使用哪种css样式的,哪个权值高的就使用那种css样式. 权值规则:标签的权值为1,类选择器的权值为10,ID选择器的权值为100. 例如: p{c

CSS中继承、特殊性、层叠、重要性

本文根据在慕课网的学习笔记整理. 继承 CSS的某些样式是具有继承性的,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签. p{color:red;} //p中的文本与span中的文本都设置为了红色 <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 有一些css样式是不具有继承性的.如bor

CSS继承、层叠和特殊性

1.继承 (1)样式应用于某个特定的HTML标签元素,而且应用于其后代. (2)但某些标签不适用,如border: (3)例子:p{color:red;}设置了颜色 <p class="first"> <p id="second"> 效果一样. 2.特殊性 (1)当标签匹配多个样式,浏览器根据权值来判断适用哪种CSS样式,权值高就使用哪种. (2)例子: p{color:red;} .first{color:green;} <p cla

CSS 的继承、层叠和特殊性

继承 CSS的某些样式是具有继承性的,那么什么是继承呢? 继承是一种规则,它允许样式不仅应用于某个特定的HTML标签元素,而且应用于其后代. EX: p{color:red;} <p>测试CSS的<span>继承</span></p> 该段代码测试效果为:  测试CSS的继承 可见P文本和span中的文本都设置成了红色. 但是注意有一些CSS样式是不具有继承性的. EX: p{border:1px solid red;} <p>测试CSS的<