`
conkeyn
  • 浏览: 1522953 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第3章 结构和层叠 => 特殊性(优先级) P69

    博客分类:
  • CSS
阅读更多

对于每个CSS规则,用户代理(浏览器)会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,那么有最高的特殊性的声明就胜出。


选择吕的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0。一个选择器的具体特殊性如下确定:

  1. 对于选择器中给定的各个ID属性值,加0,1,0,0。
  2. 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0。
  3. 对于选择器中给定的各个元素和伪元素,加0,0,0,1。伪元素是否有特殊性?在这方面CSS2有些自相矛盾,不过CSS2.1很清楚地指,伪元素有特殊性,而且特殊性值为0,0,0,1。
  4. 结合符和通配选择器对特殊性没有任贡献。

列如,以下规则中选择器的特殊性见注释:

     h1 {color:red;} /* 0,0,0,1 */     ==>h1为第3点

     p em {color:purple;} /* 0,0,0,2 */     ==>p为第3点, em为第3点

     .grape {color:purple;} /* 0,0,1,0 */     ==>.grape为第2点

     *.bright {color:yellow;} /* 0,0,1,0 */     ==>*为第4点,.bright为第2点

     p.bright {color:red;} /* 0,0,1,1 */     ==>p为第3点,.bright为第2点,

     p.bright em.dark{color:red;} /* 0,0,2,2 */     ==>p为第3点,.bright为第2点 em为第3点,.dark为第2点

     #id216{color:red;} /* 0,1,0,0 */     ==>#id216为第1点

     div#sidebar *[href] {color:red;} /* 0,1,1,1 */     ==>div为第3点,#sidebar为第1点,*为第4点,[href]为第2点。

       html > body table tr[id="totals"] td ul > il {color:maroon;} /* 0,0,1,7 */ ==>htm:0,0,0,1; body:0,0,0,1; table:0,0,0,1 tr:0,0,0,1; id="totals":0,0,1,0 td:0,0,0,1 ul:0,0,0,1 ; il:0,0,0,1;

 

上述各种情况下,那些规则之所以胜出是国为其特殊性更高。之所以会这样,是因为值是从左向右排序的。特殊性值1,0,0,0大于以0开头的所有特殊性值,而不论后面的数是什么。 所以0,1,0,1比0,0,1,7高,国为前一个值中第二位上的1大于第二个值中第二位上的0。

 

1、声明和特殊性:

一量确定一个选择器的特殊性,这个值将授予其所有相关声明。考虑以下规则:

h1,h2.section {color:silver;background:black;}

由于特殊性的缘故,用户代理(浏览器)必须相应地处理这个规则,将其“解组”为单独的规则。因此,前以的例子将变成:

h1 {color:silver;}   /* 0,0,0,1 */

h1 {background:black;}   /* 0,0,0,1 */

h2.section {color:silver;}   /* 0,0,1,1 */

h2.section {background:black;}  /* 0,0,1,1 */

如果多个规则与同一个元素匹配,而且有些声明相毒冲突,在这种情况下特殊性就很重要。例如,以下CSS程序:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>声明和特殊性</title>
<style type="text/css">
/* 0,0,0,2 */
h1 + p{
	color:red;
	font-style:italic;
}
/* 0,0,0,1 */
p{
	color:gray;
	background:white;
	font-style:normal;
}
/* 0,0,1,0 */
*.aside{
	color:black;
	background:silver;
}
</style>
</head>

<body>
<h1>Greetings!</h1>
<p class="aside">It's a fine way to start a day,don't you think?</p>
<p >There are many ways to greet a person,but the words are not as important as the act of greeting itself.</p>
<h1>Salutations!</h1>
<p >There is nothing finer than a hearty welcome from one's fellow man.</p>
<p class="aside">Although a thick and juicy hamburger with bacon and mushrooms runs a close second.</p>
</body>
</html>

 

2、通配选择器特殊性:

      前台提到过,通配选择器对一个选择器的特殊性没有贡献。换句话说,其特殊性为0,0,0,0,这与根本没有特殊性有区别。

 

    div p {color:black;} /*0,0,0,2*/

    * {color:gray;} /*0,0,0,0*/

    body * strong {color:red;} /*0,0,0,2*/

 

3、ID和属性选择器的特殊性:

       需要着重指出,ID选择器和指定id属性的属性选择器在特殊性上有所不同。再来看示例代码中的第三组规则,可以看到:

      html > body table tr[id="totals"] td ul > li {color:maroon;} /*0,0,1,7*/

      li#answer {color:navy;}  /*0,1,0,1*/

4、内联样式特殊性:

    到目前为止,我们已经见过以0开头的特殊性,所有以你可能会奇怪为什么会有这些特殊性。一般地,第一个0是为内联样式声明保留的,它比所有其他声明的特殊性都高。

h1 {color:red;} /* 0,0,0,1*/

<h1 style="color:green;">The Meadow Party</h1> /*1,0,0,0*/

 

5、重要性:

    有时候某个声明可能非常重要,超过了所有其他声明。CSS 2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标识。

 

p.dark {color:#333 !important ; background:white;}

 

如果你希望把两个声明都标识为重要,那么每个声明都需要它自己的!important标识。

 

p.dark {color:#333 !important ; background:white !important ;}

  • 大小: 7.3 KB
分享到:
评论

相关推荐

    CSS特殊性、继承与层叠

    在CSS中,特殊性、继承和层叠是决定样式如何应用于网页元素的三个核心概念。 首先,我们来详细探讨特殊性规则。特殊性是CSS中用于确定哪些样式应该优先应用的一种机制。它由选择器的不同组件决定,并由四个数字部分...

    完整版 web应用开发 web网站建设实用教程 第4讲 层叠样式表 CSS语言(共64页).ppt

    层叠样式表(CSS)是Web开发中的关键组成部分,它用于定义网页的外观和布局。在本教程中,我们将深入探讨CSS的基本概念、使用方法及其重要功能。 首先,CSS的基本功能包括跨浏览器兼容性,允许在多种浏览器上一致地...

    网页设计与制作教程第3章 高效定制网页样式——CSS.ppt

    这些规则包括:优先级、特殊性、源顺序。层叠顺序大致为:行内样式 &gt; ID选择器 &gt; 类选择器、属性选择器和伪类 &gt; 元素选择器和伪元素 &gt; 通配符选择器。 3.4 样式表的属性单位 CSS属性值可以使用多种单位,如像素(px...

    CSS 层叠和继承实现

    }`,第二个规则的特殊性更高(0,0,0,2 &gt; 0,0,0,1),所以`h1`的颜色会是蓝色。 另外,`!important`标志可以提升规则的优先级,无论特殊性如何,带有`!important`的规则都会胜出。 2. **继承** 继承是指子元素...

    第二阶段WEB开发基础学习总结.pdf

    CSS(Cascading Style Sheets)负责网页的表现,实现内容与结构的分离,提高网页的可维护性和加载速度。学习要点包括: 1. CSS注释:`/* 某注释内容 */`。 2. CSS选择器: - 元素选择器:基于HTML元素名称,如`p`...

    精通CSS+DIV源码 第一章

    《精通CSS+DIV源码 第一章》是深入学习网页布局技术的重要篇章,主要涵盖了CSS(层叠样式表)和DIV(定义文档分区)的基本概念、语法以及在实际中的应用。这一章节通常会引导初学者逐步掌握如何使用CSS来控制网页的...

    第五章 CSS样式表美化网页.

    优先级由选择器的重要性和特殊性决定。 2. 继承:子元素可以继承父元素的某些样式,如字体、颜色和行高。这有助于保持整个网站的一致性。 三、CSS布局 1. 盒模型:理解CSS盒模型至关重要,它包括元素的边距...

    第20章 CSS定义选择器

    在CSS(层叠样式表)中,选择器是用于定位网页文档中元素的关键部分,它告诉浏览器哪些HTML或XML元素应该应用哪种样式规则...通过阅读和学习第20章“CSS定义选择器”,你将能够更有效地利用CSS来控制网页的布局和外观。

    html5网页前端设计课后习题答案.docx

    定义列表标签 &lt;dl&gt; 和 &lt;/dl&gt; 是用于进行词条定义的特殊列表,每条表项需要结合词条标签 &lt;dt&gt; 和定义标签 &lt;dd&gt; 一起使用。 七、HTML5 中的块级元素和内联元素 块级元素会默认在前后自动放置一个换行符;内联元素...

    CSS&Bootstrap;

    - `#x34y`:`a=1, b=0, c=0 -&gt; 特殊性=100` #### !important例外 在CSS中,使用`!important`关键字可以提高某个样式的优先级,使其在任何情况下都生效。然而,过度使用`!important`可能会导致样式难以管理和维护,...

    JavaScript Programmer's Reference - Alexei White

    #### 第三章:JavaScript基础知识 这一章是学习JavaScript的基石,涵盖了变量、数据类型(如字符串、数字、布尔值等)、运算符以及流程控制语句(如if语句、循环结构等)。这些基础知识是后续章节学习的前提条件。 ...

    织梦地带CSS精彩教程(HTM)

    [第一章]什么是CSS-层叠样式表[第二章]简单的CSS层叠样式表的例子[第三章]使用不同的CSS写法-CSS进阶[第四章]混合使用三种插入方式的优先级和继承性问题[第五章]关于CSS中的类-CLASS[第六章]CSS对字体、字型的控制...

    css入门笔记

    必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; ...

    众妙之门—精通CSS3(PDF版)

    ##### 第3章 现代CSS布局(上):重要特征 - **渐进增强**:这是一种设计策略,即首先构建基本的功能,然后逐步增加额外的复杂特性,确保所有用户都能够访问和使用网站。 - **适应不同的用户**:讨论了如何让网页...

    有条理、完整详细 前端笔记

    #### 第9章:CSS的继承、层叠和特殊性 - **9-1 继承** - CSS继承的原理。 - 哪些属性可以继承。 - **9-2 特殊性** - 特殊性的计算规则。 - 如何确定哪条规则优先应用。 - **9-3 层叠** - 层叠的概念及其工作...

    CSS上课材料

    3. **字符转义**:在CSS中,如果需要使用特殊字符,如引号,可以使用反斜杠`\`进行转义。例如: ```css voice-family: "\\"}\""; ``` 4. **选择符的使用**: - **通配选择符**:`*`匹配所有元素,如`* {color: ...

    CSS权威指南(经典教程).chm

    优先级受选择器类型、特殊性(ID、类、元素等)和声明的位置(内联、内部、外部)影响。同时,CSS中的继承机制允许子元素继承父元素的部分样式。 四、布局技术 1. 盒模型:理解CSS布局的关键,包括内容(content)、...

    CSS选择器的权重与优先规则分享

    需要注意的是,通用选择器(`*`)、子选择器(`&gt;`)和相邻同胞选择器(`+`)的权值为0,不会影响特殊性的计算。 在实际应用中,例如有以下一组CSS规则: ```css #content div#main-content h2 { color: red; } #...

    PHP5中文函数手册+MySQL中文参考手册+CSS2.0中文手册含索引+javascript中文手册

    CSS2.0是层叠样式表的第二个主要版本,用于控制网页的布局和外观。关键知识点包括: 1. `选择器`:如类选择器、ID选择器、元素选择器等,用于定位HTML元素。 2. `盒模型`:包括内容、内边距、边框和外边距,理解盒...

Global site tag (gtag.js) - Google Analytics