html – CSS优先级逻辑

概述在这个例子中： http://jsfiddle.net/Ja29K/ <style> /* Default links */ a { color: #0F0; /* Green */ } /* Header links */ #header a { color: #F00; /* Red */ } /* Login link */ #login 在这个例子中：

http://jsfiddle.net/Ja29K/

<style>  /* Default links */  a {    color: #0F0; /* Green */  }  /* header links */  #header a {    color: #F00; /* Red */  }  /* Login link */  #login {    color: #00F; /* Blue */  }</style><header ID="header">  <p><a href="#">header link</a> is red</p>  <p><a ID="login" href="#">login link</a> is not blue</p></header>

登录链接必须是蓝色是不合逻辑的？

我知道声明具有相同的起源和相同的重要性,因此需要对它们进行评分(选择器的特异性).

为了计算选择器特异性,我为每个选择器创建了一个表

A =内联样式的数量：0
B = ID数：0
C =班级数：0
D =元素数量：0

因此登录元素有3个与其颜色相关的碰撞：a,#header a,#login

元素(A,B,C,D)
a(0,1)= 1
#header a(0,1,1)= 101
#login(0,0)= 100

选择器“#header a”获胜,因为它获得了最高分.

但

如果我们将选择器“#login”更改为“a#login”,我们将：
a#login(0,1)= 101
选择器“#header a”丢失,因为绘制赢得了声明的最后一个.

所以,我无法理解的是：

由于“#header a”选择器引用了许多元素而ID选择器(例如#login)只引用了一个元素,我们想要将ID选择器声明应用于该元素是对的,对吧？我真的无法理解这个CSS优先级逻辑,因为我认为ID选择器必须基本上是最具体的东西,就像内联样式一样.

P.S.：抱歉我的英文不好:)

解决方法 从某种意义上说,哪个选择器针对最少的元素,而不仅仅是最重要的元素,你无法看到“特异性”.

当然,通过区分诸如#header a或#loged之类的东西,规则变得更加复杂.然而,这只会给整个系统增加更多的困惑.
也很可能这个(c / w)应该被滥用如下：header#header a – 这增加了更高的特异性,但也可以针对更多的元素.

在我看来,这不会给系统增加任何进一步的价值,只会使它更复杂.

在编写CSS时,应始终尽量保持规则尽可能短的性能问题.如果你需要覆盖规则,你仍然可以添加另一个ID或类 – 除了正常的级联之外,这实际上是绰绰有余的.

总结

以上是内存溢出为你收集整理的html – CSS优先级逻辑全部内容，希望文章能够帮你解决html – CSS优先级逻辑所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。