CSS层叠样式的主次顺序

css

当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。

网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则。例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这样的用户会有可能声明确定的样式规则为! important,因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则,所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。

选择符规则: 计算特性

基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。

  1. 统计选择符中的ID属性个数。
  2. 统计选择符中的CLASS属性个数。
  3. 统计选择符中的HTML标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:

#id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

特性的顺序

为了方便使用,当两个规则具同样权重时,取后面的那个。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索网页
, 样式
, 顺序表
, 选择
, 规则
, 特性
一个
css层叠样式表、css层叠样式表手册、css层叠样式表实例、css样式层叠、css 层叠顺序,以便于您获取更多的相关知识。

时间: 2024-10-01 11:02:00

CSS层叠样式的主次顺序的相关文章

CSS层叠样式的学习[2]

css 1.规则 选择符 任何HTML元素都可以是一个CSS1的选择符.选择符仅仅是指向特别样式的元素.例如, P { text-indent: 3em } 当中的选择符是P. 类选择符 单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式.例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 : code.html { color: #191970 }code.css { color: #4b0082 } 以上的例子建立了两个类,css和html,供HTML的CODE元

CSS中样式覆盖优先顺序详解

  层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器 派生选择器以前叫上下文选择器,所以完整的层叠优先级是: 浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 <

CSS层叠样式的学习[1]

css 1.连接到一个外部的样式表 将一个外部的样式表加入到HTML网页中使用下列的格式: <LINK REF=  HREF=  TYPE=   MEDIA=> <LINK>标记放置到文档的head部分. 其中REF属性用于定义的连接文件与HTML文档之间的联系.REL=StyleSheet指定一个固定的首选样式.固定样式在样式表被激活时总是被应用.网页制作者不能指定多于一个的首选样式. 交互样式通过REL="Alternate StyleSheet"指出.例子

css应用样式的顺序-CSS应用层次及顺序的问题

问题描述 CSS应用层次及顺序的问题 本人的代码如下 : asp:gridview -- asp:gridview <div class="goto"> <a href="BasicData.aspx">基础信息维护</a> </div> 问题如下图: ![图片说明](http://img.ask.csdn.net/upload/201508/15/1439639940_44076.png) ![图片说明](http:

Jquery date picker z-index 问题,Timepicker,层叠样式z-index

在使用 Jquery date Timepicker 时候 由于还使用了其他弹出层,导致层叠样式出现些问题. 总结下解决方法 方法一:css里加入这么一行  代码如下 复制代码 .ui-datepicker { z-index:9999 !important} 方法二:  代码如下 复制代码 $('#timepicker').datetimepicker({     beforeShow: function() {         setTimeout(function(){          

火狐-老问题没人理 新发一下 为什么css父样式无法正确显示?

问题描述 老问题没人理 新发一下 为什么css父样式无法正确显示? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" la

XHTML+CSS:调用样式表

css|xhtml|样式表 web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的.这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧.要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的.    事实上,所有表现的地方都需要用CSS来实现.我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局.这是思维方式的变化,一开始有些不习惯.呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统

CSS常用样式

css 按钮样式*/.ButtonCss {}{    font-family: "Tahoma", "宋体";    font-size:9pt; color: #003399;    border: 1px #003399 solid;    color:006699;    BORDER-BOTTOM: #93bee2 1px solid;     BORDER-LEFT: #93bee2 1px solid;     BORDER-RIGHT: #93bee

用JS控制CSS基本样式

用JS控制CSS基本样式的方法 CSS code .class1 { width:10px; background-color: red; } HTML code  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <link rel="stylesheet" type="text/css" href=