- 浏览: 1522953 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (516)
- Java (49)
- Java/Struts 2.0 (25)
- Java/Spring、Spring MVC (11)
- Java/Quartz (3)
- Java/Lucene (6)
- Java/Hibernate (19)
- Java/openJPA (7)
- Java/DWR (7)
- Java/Security、Spring Security/OAuth2 (6)
- Java/Threading (9)
- Java/XML (22)
- java/design pattern (4)
- Android (2)
- JavaScript (46)
- jquery (3)
- DB/MySQL (23)
- DB/Oracle (16)
- PHP (25)
- CSS (20)
- Linux (38)
- C/C++、DLL、Makefile、VC++ (31)
- 正则 (9)
- Eclipse (4)
- 安全、网络等概念 (25)
- 集群 (7)
- 网页 (5)
- 视频\音频 (1)
- HTML (6)
- 计算机数学/算法 (3)
- Virtualbox (1)
- LDAP (2)
- 数据挖掘 (6)
- 工具破解 (1)
- 其他 (13)
- Mail (1)
- 药材 (3)
- 游戏 (2)
- hadoop (13)
- 压力测试 (3)
- 设计模式 (3)
- java/Swing (2)
- 缓存/Memcache (0)
- 缓存/Redis (1)
- OSGI (2)
- OSGI/Gemini (0)
- 文档写作 (0)
- java/Servlet (3)
- MQ/RabbitMQ (2)
- MQ/RocketMQ (0)
- MQ/Kafka (1)
- maven (0)
- SYS/linux (1)
- cache/redis (1)
- DB/Mongodb (2)
- nginx (1)
- postman (1)
- 操作系统/ubuntu (1)
- golang (1)
- dubbo (1)
- 技术管理岗位 (0)
- mybatis-plus (0)
最新评论
-
pgx89112:
大神,请赐我一份这个示例的项目代码吧,万分感谢,1530259 ...
spring的rabbitmq配置 -
string2020:
不使用增强器 怎么弄?
OpenJPA的增强器 -
孟江波:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!4 ...
spring的rabbitmq配置 -
eachgray:
...
spring-data-redis配置事务 -
qljoeli:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!1 ...
spring的rabbitmq配置
对于每个CSS规则,用户代理(浏览器)会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,那么有最高的特殊性的声明就胜出。
选择吕的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0。一个选择器的具体特殊性如下确定:
- 对于选择器中给定的各个ID属性值,加0,1,0,0。
- 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0。
- 对于选择器中给定的各个元素和伪元素,加0,0,0,1。伪元素是否有特殊性?在这方面CSS2有些自相矛盾,不过CSS2.1很清楚地指,伪元素有特殊性,而且特殊性值为0,0,0,1。
- 结合符和通配选择器对特殊性没有任贡献。
列如,以下规则中选择器的特殊性见注释:
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 ;}
发表评论
-
clear在CSS中的妙用
2009-12-24 21:53 1820在DIV + CSS设计网页中,经常需要设置多个DIV并列排 ... -
多浏览器测试的利器-IETester,自带IE5.5,IE6,IE7,IE8等多个内核.
2009-11-05 10:26 2109辛苦做出来的一个网站,到别人的电脑上显示得乱七八糟的,为啥?就 ... -
CSS IE 和 Firefox 的区别
2009-11-05 10:13 1451前言罗唆(其实很多时候没有区别,只是我们没弄好就变成区别了) ... -
第6章 文本属性==>文本缩进 P141
2009-06-05 22:27 959line-height 属性是指文本基线之间的距离,而不是字体 ... -
第6章 文本属性==>文本缩进 P135
2009-05-24 19:55 1237通过使用text-index属性,所有元素的第一行都可以缩进一 ... -
第5章 字体
2009-05-24 19:30 1236字体加粗:font-weight=>值:normal | ... -
CSS 样式学习库
2009-04-30 23:06 997CSS菜单库 http://www.dynamicd ... -
第2章 选择器 =>伪类和伪元素 P57
2009-04-30 22:33 1466利用伪类选择器和伪元素选择器,可以为文档中不一定具体存在的结构 ... -
第2章 选择器 =>选择相邻兄弟元素P56
2009-04-30 22:28 1604假设你希望对一个标题 ... -
第2章 选择器 =>特定属性选择类型 P49
2009-04-27 00:19 995<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>属性值选择器 P46
2009-04-26 23:05 1001属性值 选择器 除了可以选择有某些属性的元素 ... -
第2章 选择器 =>简单的属性选择器 P44
2009-04-26 22:53 1269如果希望选择有某个属笥的元素,而不论该属性值是什么,可以使用一 ... -
第2章 选择器 =>多类选择器 P41
2009-04-26 22:45 1352现在假设希望class为warni ... -
第2章 选择器 =>类选择器 P39
2009-04-26 11:39 948<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择器分组 P34
2009-04-26 11:03 959<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择子元素 P54
2009-04-26 10:37 1306<!DOCTYPE html PUBLIC " ... -
第1章 CSS和文档局 => @import指令
2009-03-12 22:51 1124与link类似,.@import用于指示WEB浏览器加载一个外 ... -
第1章 CSS和文档局 => link标记 P19
2009-03-12 21:51 1149对于<link>标签的属性详解: ... -
CSS入门4:css选择符
2008-08-11 14:58 813一.选择符模式 模式/含义/内容描述 * 匹 ...
相关推荐
在CSS中,特殊性、继承和层叠是决定样式如何应用于网页元素的三个核心概念。 首先,我们来详细探讨特殊性规则。特殊性是CSS中用于确定哪些样式应该优先应用的一种机制。它由选择器的不同组件决定,并由四个数字部分...
层叠样式表(CSS)是Web开发中的关键组成部分,它用于定义网页的外观和布局。在本教程中,我们将深入探讨CSS的基本概念、使用方法及其重要功能。 首先,CSS的基本功能包括跨浏览器兼容性,允许在多种浏览器上一致地...
这些规则包括:优先级、特殊性、源顺序。层叠顺序大致为:行内样式 > ID选择器 > 类选择器、属性选择器和伪类 > 元素选择器和伪元素 > 通配符选择器。 3.4 样式表的属性单位 CSS属性值可以使用多种单位,如像素(px...
}`,第二个规则的特殊性更高(0,0,0,2 > 0,0,0,1),所以`h1`的颜色会是蓝色。 另外,`!important`标志可以提升规则的优先级,无论特殊性如何,带有`!important`的规则都会胜出。 2. **继承** 继承是指子元素...
CSS(Cascading Style Sheets)负责网页的表现,实现内容与结构的分离,提高网页的可维护性和加载速度。学习要点包括: 1. CSS注释:`/* 某注释内容 */`。 2. CSS选择器: - 元素选择器:基于HTML元素名称,如`p`...
《精通CSS+DIV源码 第一章》是深入学习网页布局技术的重要篇章,主要涵盖了CSS(层叠样式表)和DIV(定义文档分区)的基本概念、语法以及在实际中的应用。这一章节通常会引导初学者逐步掌握如何使用CSS来控制网页的...
优先级由选择器的重要性和特殊性决定。 2. 继承:子元素可以继承父元素的某些样式,如字体、颜色和行高。这有助于保持整个网站的一致性。 三、CSS布局 1. 盒模型:理解CSS盒模型至关重要,它包括元素的边距...
在CSS(层叠样式表)中,选择器是用于定位网页文档中元素的关键部分,它告诉浏览器哪些HTML或XML元素应该应用哪种样式规则...通过阅读和学习第20章“CSS定义选择器”,你将能够更有效地利用CSS来控制网页的布局和外观。
定义列表标签 <dl> 和 </dl> 是用于进行词条定义的特殊列表,每条表项需要结合词条标签 <dt> 和定义标签 <dd> 一起使用。 七、HTML5 中的块级元素和内联元素 块级元素会默认在前后自动放置一个换行符;内联元素...
- `#x34y`:`a=1, b=0, c=0 -> 特殊性=100` #### !important例外 在CSS中,使用`!important`关键字可以提高某个样式的优先级,使其在任何情况下都生效。然而,过度使用`!important`可能会导致样式难以管理和维护,...
#### 第三章:JavaScript基础知识 这一章是学习JavaScript的基石,涵盖了变量、数据类型(如字符串、数字、布尔值等)、运算符以及流程控制语句(如if语句、循环结构等)。这些基础知识是后续章节学习的前提条件。 ...
[第一章]什么是CSS-层叠样式表[第二章]简单的CSS层叠样式表的例子[第三章]使用不同的CSS写法-CSS进阶[第四章]混合使用三种插入方式的优先级和继承性问题[第五章]关于CSS中的类-CLASS[第六章]CSS对字体、字型的控制...
必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; ...
##### 第3章 现代CSS布局(上):重要特征 - **渐进增强**:这是一种设计策略,即首先构建基本的功能,然后逐步增加额外的复杂特性,确保所有用户都能够访问和使用网站。 - **适应不同的用户**:讨论了如何让网页...
#### 第9章:CSS的继承、层叠和特殊性 - **9-1 继承** - CSS继承的原理。 - 哪些属性可以继承。 - **9-2 特殊性** - 特殊性的计算规则。 - 如何确定哪条规则优先应用。 - **9-3 层叠** - 层叠的概念及其工作...
3. **字符转义**:在CSS中,如果需要使用特殊字符,如引号,可以使用反斜杠`\`进行转义。例如: ```css voice-family: "\\"}\""; ``` 4. **选择符的使用**: - **通配选择符**:`*`匹配所有元素,如`* {color: ...
优先级受选择器类型、特殊性(ID、类、元素等)和声明的位置(内联、内部、外部)影响。同时,CSS中的继承机制允许子元素继承父元素的部分样式。 四、布局技术 1. 盒模型:理解CSS布局的关键,包括内容(content)、...
需要注意的是,通用选择器(`*`)、子选择器(`>`)和相邻同胞选择器(`+`)的权值为0,不会影响特殊性的计算。 在实际应用中,例如有以下一组CSS规则: ```css #content div#main-content h2 { color: red; } #...
CSS2.0是层叠样式表的第二个主要版本,用于控制网页的布局和外观。关键知识点包括: 1. `选择器`:如类选择器、ID选择器、元素选择器等,用于定位HTML元素。 2. `盒模型`:包括内容、内边距、边框和外边距,理解盒...