当你决定做一件事的时候, 就已经克服了这件事中最困难的部分.
这是本人的第一篇博客, 以前也想过要写, 但是一直都没有行动, 应该算比较懒吧.
初次写博客, 比较生疏, 大家见谅.
问题的开始
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 也就不奇怪了.
好了..这第一篇博客就写到这吧..希望我把事情说明白了..^-^..
如果各位发现了什么问题请告诉我..感谢感谢..