第一

Question

<!DOCTYPE html>
<html>
<head>
<style>
.filter ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.filter li {
    float: left;
}

.filter a:link, .filter a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

.filter a:hover, .filter a:active {
    background-color: #7A991A;
}

.active{

background: red;
}
</style>
</head>
<body>
<div class="filter">
<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>

</body>
</html>

如何使用＆＃34;有效＆＃34;为<a>标记添加红色背景。类？当前代码适用于边框（种类）但不适用于背景。

Answer 1

我喜欢这个问题，因为它揭示了一个关于CSS的有趣的事情。

第一

这样做

.filter a:hover, .filter a:active {
    background-color: #7A991A;
}

.filter a.active {
    background: red;
}

问题

css选择器实际上按重要性“优先”，这就是问题所在; css并不关心你在初始样式之后尝试覆盖...它看到.filter a:hover等更重要，因此声明被忽略了。

这是因为每个选择器都有一个“等级”，它根据点数系统确定其重要性。确切地说，按重要性排序：

1000分内联样式
100分 #ids
10分 .classes，：伪选择器和属性选择器
1分标签和伪元素，例如：first-line，body和keygen

因此，.filter a:hover值10 + 1 + 10 = 21而.active仅为10。

警告：它确实也有怪癖。例如，100 .classes仍然不如单#id

选择类的父级

1 个答案:

第一

这样做

问题