本文通过一个具体的案例探讨了CSS伪类（如:link、:visited 和 :hover）的使用顺序对网页样式的影响。指出当这些伪类顺序不当可能会导致预期的样式效果无法正确展示，并给出了解决方案。
终于解决了一个css的bug，发现原来css摆放是有顺序的，有覆盖行为，比如：
a:link {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
a:visited {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
a:hover {
font-size: 9pt; COLOR: #FF5400; backgroud-color:#333333;TEXT-DECORATION:underline;
}
如果把上述代码替换成：
a:link {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
a:hover {
font-size: 9pt; COLOR: #FF5400;backgroud-color:#333333; TEXT-DECORATION:underline;
}
a:visited {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
这样visited始终就会覆盖掉hover上的冲突属性，造成效果不正常（本例中就会看到鼠标指向后的反转色效果没有出来）
a:link {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
a:visited {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
a:hover {
font-size: 9pt; COLOR: #FF5400; backgroud-color:#333333;TEXT-DECORATION:underline;
}
如果把上述代码替换成：
a:link {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
a:hover {
font-size: 9pt; COLOR: #FF5400;backgroud-color:#333333; TEXT-DECORATION:underline;
}
a:visited {
font-size: 9pt; COLOR: #333333; TEXT-DECORATION: none;
}
这样visited始终就会覆盖掉hover上的冲突属性，造成效果不正常（本例中就会看到鼠标指向后的反转色效果没有出来）
扫一扫
1375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
