何以设置链接样式,CSS结商谈层叠
分类:前端技术

如何设置链接样式

2016/09/05 · CSS

本文作者: 伯乐在线 - 赖祥燃 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素。有了这个结构树,选择器才能起作用,这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠。

CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则),cssspecificity

本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算

通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原则(priority rules)”!

 

首先,我们来一个简单的例子:

pc28.am神测网 1<body> <ul id="summer-drinks"> <li class="favorite">First section</li> <li>Second section</li> <li>Third section</li> </ul> </body> View Code

设置样式:

pc28.am神测网 2<style> ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } .favorite { color: red; font-weight: bold; } </style> View Code

截图:
pc28.am神测网 3

然后查看效果我们发现,效果并不是我们想要的,我们favorite列文本文字并没有变红和加粗,这儿肯定出了一些意想不到的事,注意下面我们可以知道,我们的麻烦出现在这儿:

pc28.am神测网 4 ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } View Code

两个不同的CSS选择器同时设置了文字的color和font-weight,而仅仅font-size只声明了一次,因此我们可以很清晰的看到效果。对于“冲突”,浏览器必须做出选择,哪一个选择器样式最终产生效果。也就引出了以下一系列标准特异性(即权重优先级)的规则

 

计算CSS样式选择器优先级的“值”

  先看看实际选择器脚色扮演优先级:

pc28.am神测网 5

  在这里我们形象的设定:

    1、如果元素拥有内联样式(inline style),那么给内联样式1000点  例如:<h1>    2、对于每个ID,我们给他0100点  例如:#div

    3、对于每个Class、伪类(pseudo-classes)或属性选择器,我们给他0010点  例如:.classes,[attributes]和:hover,:focus

    4、对于每个具体标签元素引用和伪元素(pseudo-elements),我们给他0001点  例如::before和:after

这里数字你可以看成一般的数字计数什么的,例如0100,就可以看做100,只是下面运用形象点而是用0100

 

下面举例说明:

例一:

      ul#nav li.active a

pc28.am神测网 6

例二:

      body.ie7 .col_3 h2~h2

pc28.am神测网 7

例三:

      #footer *:not(nav) li

pc28.am神测网 8

注意:“ :not() ”自身没有权重值(这里权重值是指上面的数点,像0100),仅括号内的有权重值!

例四:

      <li>      ul > li ul li ol li:first-letter**

pc28.am神测网 9

例六:

A:

div#demo{background-image:url(n.gif);}

B:

div[id="demo"]{background-image:url(n.gif)}

  代码:

pc28.am神测网 10<!DOCTYPE html> <html> <head> <style> div{ height:100px; width:100px; } div#demo{ background:red; } div[id="demo"]{ background:green; } </style> </head> <body> <div id="demo"></div> </body> </html> View Code

  截图:
pc28.am神测网 11

这里可以验证出:A情况中的权重比B中的权重高一点,也就是ID选择器的权重比属性选择器权重高

 

重点注意:

    1、*选择器没有权重值,当然我们可以形象设定他的权重值为0000点

    2、我们设定伪元素(例如:“ :first-line ”)权重值为0001点,而设定伪类权重值为0010点

    3、伪类中“ :not() ”本身不计权重值,而在其括号里的则相应设定权重值

    4、“ !important ”比较高级,权重比内联样式的权重还高,他的样式设定可以覆盖内联样式的样式,当然了,我们可以用相同的“ !important ”去设定不同样式来      覆盖先前的“ !important ”设定的样式(这里需要知道,同一样式文件中,相同选择器多次声明样式时,是后声明的样式也就是最新声明的覆盖前面声明的样式),这里我们也可以形象的设定“ !important ”的权重值为10000点

    5、ID选择器权重比属性选择器权重高一点  例:如上例六

 

参考文章:

   Chris Coyier的Specifics on CSS Specificity

   Vitaly Friedman的CSS Specificity: Things You Should Know    

至此,CSS选择器设定样式的优先级计算也就结束了,如果写的不好大家可以在评论中补充~~

谢谢~~

Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则),cssspecificity 本篇讲解CSS特异性(CSS Specificity)的细节,也...

前言

通常我们在设置链接的一些伪类(linkvisitedhoveractive)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍,即 link-visited-hover-active,可记为 LoVe-HAte

要想弄明白为什么是这个顺序,首先我们需要知道,CSS在确定应当向一个元素应用哪些样式时,这通常不仅需要考虑 继承,还要考虑声明的 特殊性,另外需要考虑声明本身的来源,这个过程就成为 层叠。下面我们分别来看看特殊性继承层叠 这3种机制之间的关联。

 

特殊性

在实际的应用中,我们都知道一个元素可以通过多种选择器来进行选择,如ID选择器、类选择器等等,具体可看CSS选择器详解。由不同选择器组成的选择元素的方式暂且称之为 规则 吧。考虑以下3对规则,当然每对规则都选择同样的元素:

CSS

/* 规则1 */ h1 { color: red; } body h1 { color: purple; } /* 规则2 */ h2.grape { color: purple; } h2 { color: silver; } /* 规则3 */ html > body table tr[id="totals"] td ul > li { color: maroon; } li#answer { color: navy; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 规则1 */
h1 {
    color: red;
}
body h1 {
    color: purple;
}
 
/* 规则2 */
h2.grape {
    color: purple;
}
h2 {
    color: silver;
}
 
/* 规则3 */
html > body table tr[id="totals"] td ul > li {
    color: maroon;
}
li#answer {
    color: navy;
}

显然,每一对规则中只有一个胜出,因为所匹配的元素只能是某一种颜色。那么怎么知道哪一个规则更强呢?

答案就在于每个选择器的特殊性。通过计算选择器的特殊性值,特殊性最高的规则将会胜出并被利用。 这里先预留一个问题,如果特殊性相等的两个规则将如何确定应用?后面的层叠再介绍。

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

特殊性值

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

  1. 对于选择器中给定的各个ID属性值,加0,1,0,0。
  2. 对于选择器中给定的各个类属性值、属性选择或者伪类,加0,0,1,0。
  3. 对于选择器中给定的各个元素和伪元素,加0,0,0,1。
  4. 结合符和通配选择器 * 对特殊性没有任何贡献,加0,0,0,0。
  5. 内联样式特殊性为1,0,0,0,因此内联声明的特殊性最高。
  6. 标志为 !important 的声明并没有特殊的特殊性值,此时该声明为重要声明,超过所有非重要声明。

通过以上的介绍,我们就可以计算出本节刚开始介绍的3组规则的特殊性值及被应用的规则:

CSS

/* 规则1 */ h1 { /* 0,0,0,1 */ color: red; } body h1 { /* 0,0,0,2 (元素应用该规则) */ color: purple; } /* 规则2 */ h2.grape { /* 0,0,1,1 (元素应用该规则) */ color: purple; } h2 { /* 0,0,0,1 */ color: silver; } /* 规则3 */ html > body table tr[id="totals"] td ul > li { /* 0,0,1,7 */ color: maroon; } li#answer { /* 0,1,0,1 (元素应用该规则) */ color: navy; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 规则1 */
h1 { /* 0,0,0,1 */
    color: red;
}
body h1 { /* 0,0,0,2 (元素应用该规则) */
    color: purple;
}
 
/* 规则2 */
h2.grape { /* 0,0,1,1 (元素应用该规则) */
    color: purple;
}
h2 { /* 0,0,0,1 */
    color: silver;
}
 
/* 规则3 */
html > body table tr[id="totals"] td ul > li { /* 0,0,1,7 */
    color: maroon;
}
li#answer { /* 0,1,0,1 (元素应用该规则) */
    color: navy;
}

特殊性顺序 “important > 内联 > ID > 类| 伪类 | 属性选择 > 标签| 伪对象 > 通配符” > 继承

继承

基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。下面的例子帮你了解继承是如何工作的:

CSS

ul { color: red; }

1
2
3
ul {
    color: red;
}

XHTML

<div> <ul> <li>ul下的第一个li</li> <li>ul下的第二个li</li> <li>ul下的第三个li</li> </ul> <ol> <li>ol下的第一个li</li> <li>ol下的第二个li</li> <li>ol下的第三个li</li> </ol> </div>

1
2
3
4
5
6
7
8
9
10
11
12
<div>
   <ul>
       <li>ul下的第一个li</li>
       <li>ul下的第二个li</li>
       <li>ul下的第三个li</li>
   </ul>
   <ol>
       <li>ol下的第一个li</li>
       <li>ol下的第二个li</li>
       <li>ol下的第三个li</li>
   </ol>
</div>

效果:

  • ul下的第一个li
  • ul下的第二个li
  • ul下的第三个li
  1. ol下的第一个li
  1. ol下的第二个li
  1. ol下的第三个li

原理就是将声明 color: red; 应用到 ul 元素时,这个元素会采用该声明。然后将这个值再沿着文档树向下传播到后代元素,并一直继承,直到再没有更多的后代元素继承这个值为止。值绝对不会向上传播,也就是说,元素不会把值向上传递到其祖先。

重要:继承值是完全没有特殊性的,因此特殊性值为0,0,0,0的特殊性也比其高,说明继承值很容易被其他方式中的声明取代。

 

层叠

特殊性 一节中我们预留了一个问题:如果特殊性相等的两个规则将如何确定应用?假设有以下规则:

CSS

h1 { color: red; } h1 { color: blue; }

1
2
3
4
5
6
h1 {
    color: red;
}
h1 {
    color: blue;
}

哪一个会占上风?这两个规则的特殊性都是0,0,0,1,所以它们的权重相等,都应当应用到元素,但这是不可能的,因为一个元素不可能既是红色又是蓝色(实际是蓝色)。因此这里 层叠 就出场了,先看看层叠规则:

下面分别介绍规则中后三条规则。

Selectors 选择符

Syntax Samples 语法

ensample 示例

Specificity 特性

通配选择符(Universal Selector)

*

*.div { width:560px;}

0,0,0,0

类型选择符(Type Selectors)

E1

td { font-size:12px;}

0,0,0,1

伪类选择符(Pseudo-classes Selectors)

E1:link

a:link { font-size:12px;}

0,0,1,0

属性选择符(Attribute Selectors)

E1[attr]

h[title] {color:blue;}

0,0,1,0

ID选择符(ID Selectors)

#sID

#sj{ font-size:12px;} 

0,1,0,0

类选择符(Class Selectors)

E1.className

.sjweb{color:blue;}

0,0,1,0

子对象选择符(Child Selectors)

E1 > E2

body > p {color:blue;}

E1 E2

相邻选择符(Adjacent Sibling Selectors)

E1   E2

div   p {color:blue;}

E1 E2

选择符分组(Grouping)

E1,E2,E3

.td1,a,body {color:blue;}

E1 E2 E3

包含选择符(Descendant Selectors)

E1 E2

table td {color:blue;}

E1 E2

 

按权重和来源排序

根据第二条规则,如果两个样式规则应用到同一个元素,而且其中一个规则有 !important 标志,这个重要规则将胜出.

CSS

p { color: gray !important; }

1
2
3
p {
    color: gray !important;
}

pc28.am神测网,XHTML

<p style="color: black;">Well, <em>hello<em> there!</p>

1
<p style="color: black;">Well, <em>hello<em> there!</p>

效果:

Well, hello there!

另外,还要考虑规则的来源。来源权重由大到小的顺序依次为:

  1. 读者的重要声明(有 !important
  2. 创作人员的重要声明(有 !important
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理声明

2.重要性 有时某个声明可能很重要,超过了所有其他声明,CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标志。 标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。类似地,我们认为所有非重要声明也归为一组,使用特殊性来解决冲突。若一个重要声明和一个非重要声明冲突,胜出的总是重要声明。 3.继承 基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。继承是CSS中最基本的内容,除非有必须,否则一般不会特别考虑。不过需要注意以下几点: 1)注意有些属性不能被继承,这往往归因于一个简单的常识。一般地,大多数框模型属性(包括外边距,内边距,背景和边框)都不能被继承。 2)继承的值根本没有特殊性,甚至连0特殊性都没有。如下:

按特殊性排序

根据第三条规则,如果向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则按特殊性排序,最特殊的声明最优先。

CSS

p#bright { color: silver; } p { color: black; }

1
2
3
4
5
6
p#bright {
    color: silver;
}
p {
    color: black;
}

XHTML

<p id="bright">Well, hello there!</p>

1
<p id="bright">Well, hello there!</p>

效果:

Well, hello there!

Java代码 

按顺序排序

最后,根据第四条规则,如果两个规则的权重、来源和特殊性完全相同,那么在样式表中后出现的一个会胜出。

CSS

h1 { color: red; } h1 { color: blue; }

1
2
3
4
5
6
h1 {
    color: red;
}
h1 {
    color: blue;
}

XHTML

<h1>我是蓝色的标题1</h1>

1
<h1>我是蓝色的标题1</h1>

效果:

 pc28.am神测网 12)

我是蓝色的标题1

  1. *{color:gray;}  
  2. h1#page-title{color:black;}  
  3.   
  4. <h1 id="page-title">Meetkat <em>CEntral</em><h1>  
  5. <p>Welcome to the best place on the web</p>  

链接样式顺序

好了,通过前面的介绍,我想大家应该基本了解CSS是如何确定应当向一个元素应用哪些值的。回到前言说到的链接样式顺序,为了正确的表现所设置的样式,我们必须按一定的顺序进行样式设置。根据CSS2规范中的推荐顺序,即 link-visited-hover-active,声明样式如下:

CSS

:link { color: blue; } :visited { color: purple; } :hover { color: red; } :active { color: orange; }

1
2
3
4
5
6
7
8
9
10
11
12
:link {
    color: blue;
}
:visited {
color: purple;
}
:hover {
    color: red;
}
:active {
    color: orange;
}

根据之前的介绍,以上这些选择器的特殊性都是一样的:0,0,1,0。因此他们有相同的权重、来源和特殊性,因此与元素匹配的最后一个选择器才会胜出。

正在 “点击”未访问 链接可以与其中3个规则匹配 —— :link:hover:active,所以按照上面的声明顺序,:active将胜出,这可能就是我们所期望的。

假设我们忽略这种常用的顺序,而是按字母顺序排列链接样式,声明样式如下:

CSS

:active { color: orange; } :hover { color: red; } :link { color: blue; } :visited { color: purple; }

1
2
3
4
5
6
7
8
9
10
11
12
:active {
    color: orange;
}
:hover {
    color: red;
}
:link {
    color: blue;
}
:visited {
color: purple;
}

按照这种顺序,任何链接都不会显示 :hover 或者 :active,因为 :link:visited 规则后出现。所有链接都必须要么是已访问(:visited),要么是未访问(:link),所以 :link:visited 样式总是会覆盖 :hover 或者 :active

当然链接样式也可以根据自己的实际需要设定某一种顺序,比如 link-hover-visited-active 这样的一个顺序,起到的效果是 只有未访问的链接会有悬停样式,已访问的链接没有悬停样式

最后,由于可以把伪类链接起来,所以可以不必担心这些问题。以下规则可以任何顺序列出,而不必担心有什么负面影响:

CSS

:link { color: blue; } :visited { color: purple; } :link:hover { color: red; } :visited:hover { color: gray; } :link:active { color: orange; } :visited:active { color: silver; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:link {
    color: blue;
}
:visited {
color: purple;
}
:link:hover {
    color: red;
}
:visited:hover {
    color: gray;
}
:link:active {
    color: orange;
}
:visited:active {
    color: silver;
}

 因为通配选择器适用于所有元素,而且有0特殊性,其颜色声明指定的值gray要优先于继承值(black),因为继承值根本没有特殊性。故em元素会显示为灰色而不是黑色。 4.层叠 CSS所基于的方法是让样式层叠在一起,这是通过继承和特殊性做到的,CSS2.1的层叠规则如下: 1)找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器 2)按显式权重对应用到给定元素的所有声明排序。标志!important的规则的权重高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员,读者,用户代理。正常情况下,创作人员的样式要胜于读者的样式表,有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。 3)按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重重要大于较低特殊性的元素。 4)按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入样式表的话,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。 接下来对2)3)4)详细说明: 2)按权重和来源排序 若两个样式规则应用到同一个元素,而且其中一个规则有!important标志,这个重要规则将胜出。在声明权重方面要考虑5级,权重由大到小的顺序依次为: 1.读者的重要声明 2.创作人员的重要声明 3.创作人员的正常声明 4.读者的正常声明 5.用户代理声明 3)按特殊性排序若 若向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则要按特殊性排序,最特殊的声明最优先。 4)按顺序排序 若两个规则的权重,来源和特殊性完全相同,那么在样式表中后出现的一个会胜出。特别地,认为元素style属性中指定我样式位于文档样式表的最后,即放在所有其他规则的后面。不过,这一点已经没有意义了,因为CSS2.1明确指明内联样式的特殊性要高于所有样式表选择器。 正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-hover-active(LVHA)。

结语

通过对链接样式顺序为什么是 link-visited-hover-active 的解答,我希望帮助大家能加深了解CSS在确定应当向一个元素应用哪些样式时的一些基本原理。

1 赞 4 收藏 评论

Java代码 

关于作者:赖祥燃

pc28.am神测网 13

码农也 — 摆脱懒惰,实现价值 个人主页 · 我的文章 ·     

pc28.am神测网 14

 pc28.am神测网 15)

  1. :link{color:blue;}  
  2. :visited{color:purple;}  
  3. :hover{color:red;}  
  4. :active{color:orange;}  

 这四个选择器的特殊性都是一样的:0,0,1,0。因为它们有相同的权重,来源,特殊性,故与元素匹配的最后一个选择器才会胜出。 正在“点击”的未访问链接可以与其中3个规则匹配——:link,:hover,:active——所以在这三个规则当中最后声明的一个胜出。若按照LVHA顺序,:active将会胜出,这也正是所期望的。 5.非CSS表现提示 文档有可能包含非CSS的表现提示,例如font元素。非CSS提示被处理为特殊性为0,并出现在创作人员样式表的最前面。只要有创作人员或读者样式,这种表现提示就会被覆盖,但用户代理的样式不能将其覆盖。

 

注意:

1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。

如:<div style=”color: red”>sjweb</div>

外部定义指经由<link>或<style>标签定义的规则;

2.!important声明的Specificity值最高;

3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;

4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

5.由于它能匹配任何元素,所以通配选择器往往有一种短路继承的效果。

6..当遇到多个选择符同时出现时候,按选择符得到的Specificity值逐位相加{数位之间没有进制 比如说: 0,0,0,5   0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。

 

 

-----------以上内容都是权重理论上的知识,按理说支持css2.1的浏览器应该都遵循----------------- IE6和IE7却不完全是那么回事;这里说的IE7排除掉IE8的兼容模式。

 

Java代码 

 pc28.am神测网 16)

  1. a { /* 权重为[0,0,1] */  
  2.     color: #00f;  
  3.     background-color: #ff0;  
  4. }  
  5. a:hover { /* 权重为[0,1,1] */  
  6.     color: #ff0;  
  7.     background-color: #00f;  
  8. }  
  9. 这是基础样式:蓝色字,黄色背景,鼠标悬停的时候颜色颠倒  

 

接下来,添加规则

Java代码 

 pc28.am神测网 17)

  1. p a.cl1 { /* 权重为[0,1,2] */  
  2.     color: #f00;  
  3.     background-color: #0ff;  
  4. }  
  5. <p><a class="cl1" href="#">...</a></p>  

 红色字,浅绿色背景,权重为 [0,1,2], 比第一条权重高

在IE6下”normal” (not hover) 的值被覆盖了, 但是没有覆盖”hover”的值. 换句话说,权重为[0,1,1]的”hover”依然生效, 它没有被比他权重高的p a.cl1 [0,1,2]所覆盖 (但是没有定义:hover伪类)

 

Java代码 

 pc28.am神测网 18)

  1. .cl2 a.cl3 { /* 权重为 [0,2,1] */  
  2.     color: #f00;  
  3.     background-color: #0ff;  
  4. }  
  5. <p class="cl2"><a class="cl3" href="#">...</a></p>  

红色字,浅绿色背景,权重为 [0,2,1], 比第一条规则”normal”和”hover”都要高现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重 [0,2,1] 完全覆盖了权重 [0,1,1]

 

Java代码 

 pc28.am神测网 19)

  1. div p :hover { /* 权重为 [0,1,2] */  
  2.     color: #f00;  
  3.     background-color: #0ff;  
  4. }  
  5. <div><p><a href="#">...</a></p></div>  

 当鼠标悬停在链接上的时候是红色字,浅绿色背景 , 权重为 [0,1,2], 比第一条”hover”的权重 [0,1,1]高

第一条:hover完全被覆盖,IE6也是一样. 这个例子的权重 [0,1,2]和第二个例子的权重是一样的,但是它多了对 伪类:hover的定义就能完全覆盖第一条”hover”规则, 而第二个例子就不会覆盖 演示地址:IE6/Win: 关于伪类:hover的权重问题 IE6/win下伪类:visited也存在类似问题,不再赘述,演示地址:IE6-/Win: 关于伪类:visited的权重问题

 

还有其他一些,在IE67下都会产生错误权重的情况,其他浏览器有条件的请帮忙测试一下: 情况一:

Java代码 

 pc28.am神测网 20)

  1. p.c12 {/* 权重为[0.1.1] */  
  2.     color: #c00;  
  3. }  
  4. div .c12 {/* 权重为[0.1.1] */  
  5.     color: #090;  
  6. }  
  7. <div><p class="c12">el.class (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>  

 如果顺序换过来el .class (red), el.class (green),就是正确的了

 

 

情况二:

Java代码 

 pc28.am神测网 21)

  1. div .c24 {/* 权重为[0.1.1] */  
  2.     color: #009900;  
  3. }  
  4. .c23 p {/* 权重为[0.1.1] */  
  5.     color: #CC0000;  
  6. }  
  7. <div class="c23"><p class="c24">.class el (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>  

 如果顺序换过来el .class (red), .class el (green),就是正确的了

 

 

情况三:

Java代码 

 pc28.am神测网 22)

  1. div #c28 {/* 权重为[1.0.1] */  
  2.     color: #009900;  
  3. }  
  4. #c27 p {/* 权重为[1.0.1] */  
  5.     color: #CC0000;  
  6. }  
  7. <div id="c27"><p id="c28">#id el (red), el #id (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>  

 如果顺序换过来el #id (red), #id el (green),就是正确的了

:first-letter使用的比较少,这个例子就不写了

 

 

情况四:

p.c31 {/* 权重为[0.1.1] */ color: #c00;/* red */ } body p.c31 {/* 权重为[0.1.2] */ color: #090;/* green */ color: miao; /* 故意的错误 */ } <p class="c31">在IE67下会错误显示红色</p>

 演示地址:其他权重错误

 

 

下面来看下!important 这个诡异的东西。

1 <style type="text/css">  2  div{background: red !important; background: blue} 3 </style> ­

除了IE6,其他浏览器都会显示背景为红色,正是!important的作用,意思就是只要我在这里我就是最重要的啦,任何东西都不能取代我,没看见都是一个 !外加一个英文单词 important 吗?很形象,很贴切了。IE6这里会显示背景为蓝色,并不是IE6不支持!important,而是它会按照样式声明顺序后出现的覆盖前面的,此时它已经不认识!important了,它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色:

1 <style type="text/css">  2 div{background: blue; background: red !important; } 3 </style> ­

再来看下4位特殊性标志 [0.0.0.0]
从左至右,每次给某一个位置 1,前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。
1,内联样式 [1.0.0.0] 
A:<span id="demo" ></span> B:还有就是JS控制的内联样式style对象,document.getElementByIdx("demo").style.color="red"; 这两者属于同一级别,不过一般情况是JS控制的内联样式优先级高,这与先后顺序申明有关系与本质无关,因为往往DOM操作是在DOM树加载完毕之后。
2,ID选择器 [0.1.0.0] 3,类,属性,伪类 选择器 [0.0.1.0] 4,元素标签,伪元素 选择器 [0.0.0.1]
关于CSS选择器可以查看W3C或者CSS的手册,不啰嗦了。 注意下 伪类选择器
LVHA伪类,样式按LVHA优先级顺序从右至左覆盖,不同的顺序会产生不同的效果。 a:link - 默认链接样式 a:visited - 已访问链接样式 a:hover - 鼠标悬停样式 a:active - 鼠标点击样式
最后写下关于JS控制内联样式 带!important的现象:
看下正常的Demo1:  

 

1 <style type="text/css">  2 div{background: red !important; height:20px;}  3 #demo1{ background: green;}  4 .demo1{ background:blue;}  5 </style> ­

 

1 <div class="demo1" id="demo1" style="background: yellow"></div>

 

1pc28.am神测网 23<script type="text/javascript"> 2pc28.am神测网 24document.getElementByIdx("demo1").style.background="black";  3pc28.am神测网 25</script> 

 

最终显示背景为红色,这应该不会有什么问题, !important 放到哪都会改变优先级的,而后面的JS代码也不会改变优先级。

 

另外一个Demo2:

1 <style type="text/css"> 2 div{background: red !important; height:200px;} 3 #demo2{ background: green;} 4 .demo2{ background: blue;} 5 </style> 6 

 

1 <div class="demo2" id="demo2" style="background: yellow !important"></div>

 

1 <script type="text/javascript"> 2 document.getElementByIdx("demo2").style.background="black"; 3 </script>

IE6,7        显示 红色

FF2         显示 黄色

Opera9    显示 红色

Safari       显示 黄色

Demo3:

1 ­<style type="text/css"> 2 div{background: red !important; height:200px;} 3 #demo3{ background: green;} 4 .demo3{ background: blue;} 5 </style>

1 <div class="demo3" id="demo3" style="background: yellow !important"> </div>

 

1 ­<script type="text/javascript"> 2 document.getElementByIdx("demo3").style.background="black !important"; 3 </script>

 

IE6,7       显示红色

FF2        显示黄色

Opera9   显示黑色

Safari      显示黑色

 

解释下上面两个例子:

JS控制的style对象 实际就是内联样式style,这个没错

但是对于 JS控制style对象属性值里增加的!important 三个浏览器却给出了不同的结果:

IE:JS控制style对象属性值完全覆盖内联style属性值,不支持Element.style.property="value !important",将报错:参数无效。
FF2 :不完全支持 Element.style.property="value !important" : !important无效,不会报错, 如果内联style属性值无!important,则完全覆盖,有!important 则内联style属性优先级最高,不会受JS控制style的任何影响。
Opera9 :JS控制style对象属性值完全覆盖内联style属性值,支持Element.style.property="value !important"。
Safari:支持Element.style.property="value !important" ,如果内联style属性值无!important,则完全覆盖,有!important 则内联style属性优先级最高,不会受JS控制style的任何影响。

 

这一部分规则为我们提供了解决CSS优先级最万能的方法: !important ,遇到无法解决的CSS优先级问题请考虑使用!important。另外请注意IE6的BUG,在使用!important的时候需要把!important写在此行CSS规则的末尾,否则将无法生效,如: .zhongsou {font-size:18px !important; font-size:12px;} IE6下!important将被忽略,字号为12px;其他浏览器显示字号为18px。 .zhongsou {font-size:12px; font-size:18px !important;} 所有浏览器显示字号为18px。

 

参考文献:

[教程] css2.1的权重(specificity)在IE6/7下的一些错误规则

css权威指南(第三版)

本文由pc28.am发布于前端技术,转载请注明出处:何以设置链接样式,CSS结商谈层叠

上一篇:测测你符合从事Web前端开拓吗,初入前端 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 何以设置链接样式,CSS结商谈层叠
    何以设置链接样式,CSS结商谈层叠
    如何设置链接样式 2016/09/05 · CSS 本文作者: 伯乐在线 -赖祥燃。未经作者许可,禁止转载! 欢迎加入伯乐在线 专栏作者。 每个合法的文档都会生成一个文
  • CSS图像替换,文本缩进
    CSS图像替换,文本缩进
    CSS图像替换:文本缩进,负边距以及更多方法 2016/07/04 · CSS ·图像替换 原文出处: BaljeetRathi   译文出处:众成翻译    CSS中的图像替换有着广泛而多样
  • 用法教程
    用法教程
    CSS Modules 用法教程 2016/06/19 · CSS ·Modules 初藳出处:阮一峰    学过网页开拓就能知晓,CSS 无法算编程语言,只是网页样式的一种描述方法。 为了让 CSS也
  • 最基本的多少个概念,面试希图之CSS
    最基本的多少个概念,面试希图之CSS
    CSS 最核心的几个概念 2015/08/26 · CSS · 5评论 ·CSS 原文出处:GeekPlux    本文将讲述 CSS中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS的基
  • 详解HTML5中rel属性的prefetch预加载功效接纳,前端
    详解HTML5中rel属性的prefetch预加载功效接纳,前端
    前端质量优化 – 能源预加载 2015/11/19 · JavaScript· 预加载 原著出处: ROBINRENDLE   译文出处:bubkoo的博客(@问崖的崖)    当提到前端质量优化时,我们