从<a>标签到CSS选择器的优先级

当你决定做一件事的时候, 就已经克服了这件事中最困难的部分.

这是本人的第一篇博客, 以前也想过要写, 但是一直都没有行动, 应该算比较懒吧. 

初次写博客, 比较生疏, 大家见谅.

问题的开始

a 和 a:link 有什么区别?

大家都知道, 在CSS中 a 是一个标签选择器(也叫类型选择器), 用于选取在HTML文档中所有像 <a>(链接标签) 这个样子的元素.

而 a:link 这个选择器则代表HTML文档中所有未访问过的 <a> 元素. 

那么问题来了, 在我们新访问一个网页的时候, 里面有一个<a>元素, 因为这个<a>是没有被访问过的, 所以符合 a 和 a:link 2个选择器的要求, 在他们的属性有冲突的时候<a>元素会应用哪个选择器的样式呢?

来看下面的代码..

a
{
    color: red;
}
a:link
{
    color: green;
}

结果链接是绿色的. 看来应用的是 a:link 这个选择器

是选择器顺序的影响吗? 

因为在CSS中对于一个元素后定义的样式会覆盖先定义的样式, 所以考虑了下会不会是顺序的原因.

于是更改代码如下..

a:link
{
    color: green;
}
a
{
    color: red;
}

链接的结果依然是绿色的. 

在2种情况下都会应用 a:link 选择器的样式, 于是就有了选择器优先级的概念

CSS选择器的优先级靠选择器的总权重决定

1. 行内样式 ( 就是在HTML标签中直接写样式, 像这样<a style="..."> )  权重 1000

2. id选择器 ( 就是以 '#' 这个开头的选择器 ) 权重 100

3. 类选择器 ( 这个最常用了, 就是以'.' 开头的 ) 和 伪类选择器 (冒号 ':' 开头的) 还有 属性选择器 ( 被 '[' 和 ']' 包起来的 ) 权重 10

4. 类型选择器 和 伪元素选择器 ( 比如 :first-child ) 权重 1

一个选择器的总权重是根据上面各种选择器出现的次数决定的

比如 a 的总权重就是1

而 a:link 的总权重是 1 + 10 = 11 

11 > 1 所以 a:link 的优先级高于 a, 所以说上面每次都应用的是 a:link 也就不奇怪了.

好了..这第一篇博客就写到这吧..希望我把事情说明白了..^-^..

如果各位发现了什么问题请告诉我..感谢感谢..