CSS 列表项的颜色没有改变

Question

我在首页列表项上放了一个class='active'：

为什么它不改变颜色？

body {
  background: #000;
}
#wrapper {
  width: 68%;
  margin: 0 auto;
  /*border:1px solid #000;*/
  background: #fff;
  margin-top: 55px;
}
.container {
  padding: 20px;
  /*border:1px solid red;*/
  border-bottom: 3px solid #d6e1df;
}
#header {
  /*border:5px solid #4b9f52;*/
  padding: 0 100px 0 100px;
  text-align: center;
  font: 18px Josefin;
  color: #bbb;
  font-weight: 100;
  padding-top: 0;
}
#header h1 {
  font-family: Roboto;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 100;
  color: #5d5d5d;
  /*border:1px solid #000;*/
}
ul {
  margin: 0;
  padding: 0;
}
.container>ul>li {
  display: inline-block;
  list-style: none;
}
.container>ul>li>a {
  display: block;
  text-decoration: none;
  color: #bbb;
  padding: 10px;
}
.container>ul>li>a:hover {
  color: #3D9970;
  transition: 0.5s ease-out;
}
.active {
  color: red;
  border: 1px solid red;
}
#content {
  padding: 0 100px 0 100px;
}

<div id='wrapper'>
  <div id='header'>
    <div class='container'>
      <h1>Chisinau</h1>
      <p>blog situat intre Prut si Nistru</p>
    </div>
    <div class='container'>
      <ul>
        <li><a class='active' href="#">Home</a>
        </li>
        <li><a href="#">Despre</a>
        </li>
        <li><a href="#">Cautare</a>
        </li>
        <li><a href="#">En</a>
        </li>
      </ul>
    </div>
  </div>

  <div id='content'>
    <div class='container'>
      <h1>Post</h1>
    </div>
  </div>
</div>

Fiddle Demo

为什么没有改变？我需要更改一些代码吗？

Answer 1

这是因为您有一个更具体的选择器，它将颜色设置为 li 中的 a 元素。

.container>ul>li>a{
    display: block;
    text-decoration: none;
    color: #bbb;
    padding: 10px;
}

上面选择器的特殊性是013，因为它有1个class选择器和3个元素类型选择器作为复杂选择器链的一部分。它没有 ID 选择器。

因为这里提到了 color: #bbb 而 .active 选择器不太具体，所以没有应用红色。

将 .active class 的选择器更改为如下所示。这使它更具体，因此会将颜色应用于元素。

.container>ul>li>a.active{
  color: red;
  border: 1px solid red;
}

body {
  background: #000;
}
#wrapper {
  width: 68%;
  margin: 0 auto;
  /*border:1px solid #000;*/
  background: #fff;
  margin-top: 55px;
}
.container {
  padding: 20px;
  /*border:1px solid red;*/
  border-bottom: 3px solid #d6e1df;
}
#header {
  /*border:5px solid #4b9f52;*/
  padding: 0 100px 0 100px;
  text-align: center;
  font: 18px Josefin;
  color: #bbb;
  font-weight: 100;
  padding-top: 0;
}
#header h1 {
  font-family: Roboto;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 100;
  color: #5d5d5d;
  /*border:1px solid #000;*/
}
ul {
  margin: 0;
  padding: 0;
}
.container>ul>li {
  display: inline-block;
  list-style: none;
}
.container>ul>li>a {
  display: block;
  text-decoration: none;
  color: #bbb;
  padding: 10px;
}
.container>ul>li>a:hover {
  color: #3D9970;
  transition: 0.5s ease-out;
}
.container>ul>li>a.active{
  color: red;
  border: 1px solid red;
}
#content {
  padding: 0 100px 0 100px;
}

<div id='wrapper'>
  <div id='header'>
    <div class='container'>
      <h1>Chisinau</h1>
      <p>blog situat intre Prut si Nistru</p>
    </div>
    <div class='container'>
      <ul>
        <li><a class='active' href="#">Home</a>
        </li>
        <li><a href="#">Despre</a>
        </li>
        <li><a href="#">Cautare</a>
        </li>
        <li><a href="#">En</a>
        </li>
      </ul>
    </div>
  </div>

  <div id='content'>
    <div class='container'>
      <h1>Post</h1>
    </div>
  </div>
</div>

修改后的选择器的特异性现在是 023，因为它在复杂的选择器链中多了一个 class 选择器。

有一个非常好的特异性计算器，由 Keegan Street 开发并且可用 here。在您完全熟悉特异性计算之前，这非常有用。

Answer 2

您可以像这样更改活动class

.active {
    border: 1px solid red;
    color: red !important;
}

CSS 列表项的颜色没有改变

CSS color of List item is not changing

html

css

css-selectors

css-specificity