为什么是link-visited-hover-active

站长手记作者： 2024-08-28 09:25:01

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

前言

特殊性

/* 规则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;
}

特殊性值

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

/* 规则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;
}

继承

// CSS
ul {
    color: red;
}

// html
<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>

层叠

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

按权重和来源排序

p {
    color: gray !important;
}

<p>Well, <em>hello<em> there!</p>

读者的重要声明（有 !important）
创作人员的重要声明（有 !important）
创作人员的正常声明
读者的正常声明
用户代理声明

按特殊性排序

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

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

按顺序排序

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

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

链接样式顺序

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

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

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