网站做m版,别墅外观设计网站推荐,在网站上如何做天气预报栏,企业信用信息公示年报一、特殊性规则 选择器的特殊性由选择器本身的组件确定#xff1b;特殊性由四个部分组成#xff0c;其初始值为0#xff0c;0#xff0c;0#xff0c;0。 1. 对于选择器中的每一个id#xff0c;记0#xff0c;1#xff0c;0#xff0c;0#xff1b; 2. 对于选择…一、特殊性规则 选择器的特殊性由选择器本身的组件确定特殊性由四个部分组成其初始值为0000。 1. 对于选择器中的每一个id记0100 2. 对于选择器中的每一个类、伪类、属性记0010 3. 对于选择器中的每一个元素、伪元素记0001 4. 结合符与通配符对于选择器的特殊性没有任何贡献。 注意 1. 0010的特殊性比00013的特殊性更高。 2. 通配符 * 的特殊性为0000它是有特殊性的结合符比如h1p中的“”根本没有特殊性继承而来的样式也没有特殊性。 请看如下代码 1 !DOCTYPE html2 html3 head4 meta charsetutf-85 title/title6 style7 * {8 color:red;9 }
10
11 body {
12 color:cyan;
13 }
14 /style
15 /head
16 body
17 pWhat kind of color this para will be?/p
18 /body
19 /html View Code 页面显示如下 此例中p元素从body元素中继承了cyan颜色然而继承来的规则根本没有特殊性其优先级低于 * 的0特殊性所以p元素采用了 * 的规则颜色为red。 关于通配符 * 由于 * 适用于所有元素而且有0特殊性往往会在不经意间造成继承无法实现的情况应该尽量避免使用 * 选择器。 3. 指定id属性的属性选择器与id选择器有本质区别比如 1 !DOCTYPE html2 html3 head4 meta charsetutf-85 title/title6 style7 div[idtest] p {8 color:red;9 }
10
11 #test p {
12 color:cyan;
13 }
14 /style
15 /head
16 body
17 div idtest
18 pWhat kind of color this para will be?/p
19 /div
20 /body
21 /html View Code 页面效果 此例中div[idtest] p 的特殊性为0012而 #test p 的特殊性为0101#test p 这个选择器胜出所以字体颜色为cyan。 4. 行内样式的特殊性最高为1000。 5. 标记为!important的声明被称为重要声明它没有特殊性不过要与非重要声明分开考虑。 具体而言非重要声明分为一组它们之间的冲突使用特殊性解决重要声明分为一组它们之间的冲突内部解决重要声明总是比非重要声明优先。 二、继承 1. 继承没有任何特殊性记住这一点往往能明白很多问题。 请看如下代码 1 !DOCTYPE html2 html3 head4 meta charsetutf-85 title/title6 style7 p {8 color:red;9 }
10 /style
11 /head
12 body
13 pWhat kind of color this a href#link/a will be?/p
14 /body
15 /html View Code 页面效果 为什么设置了p元素的颜色为红色a元素的颜色却是蓝色 这并不是因为a元素不继承父元素的颜色原谅我之前就是这么认为的而是因为a元素继承了p元素的颜色但是这个继承来的样式根本没有特殊性然而浏览器默认样式中对a元素设置了样式很明显浏览器默认样式的特殊性更高于是a元素就按照浏览器默认样式显示。 2. CSS中有一个关键字是所有属性共有的inherit它使一个属性的值与其父元素相同。 在大多数情况下不必指定继承因为大多数属性会自动继承不过自动继承的属性没有特殊性很容易被其它样式覆盖当需要显式地指定一个元素的样式与其父元素一致时使用inherit会更方便。 三、层叠 层叠规则 1. 按权重排序读者重要声明作者重要声明作者一般声明读者一般声明用户代理声明。 2. 权重相同的情况下按照特殊性排序特殊性越高的胜出。 3. 特殊性相同的情况下按照样式表中的顺序排序后出现的胜出。 btw正是因为这个规则才会使用LoVe-HA的顺序声明链接样式LoVe-HA 依次为 :link; :visited; :hover; :active。 关于 外部样式内部样式行内样式 的说明 这种说法来源于上述第3条规则。一般而言在html的head元素下我们习惯将外部样式表的link标签放在内部样式style之前这就导致了内部样式的顺序在外部样式的顺序之后所以内部样式优先级高但是如果将style标签与link标签调换位置比如这样 1 !DOCTYPE html2 html3 head4 meta charsetutf-85 title/title6 style7 p {8 color:red;9 }
10 /style
11 link relstylesheet typetext/css href1.css
12 /head
13 body
14 pWhat kind of color this para will be?/p
15 /body
16 /html View Code 此例中外部样式表包含 P {color:cyan;} 这样一条规则它的特殊性与内部样式表一样都为0001但由于外部样式表在内部样式之后所以外部样式胜出页面显示如下 所以 外部样式内部样式 这只是一种习惯上的说法关键还是要看它们出现的顺序顺序越靠后的优先级更高。 当然行内样式总是最靠后的所以它的优先级高于外部样式和内部样式这是毋庸置疑的。转载于:https://www.cnblogs.com/cc156676/p/5670993.html
