List项的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

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

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

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

由于此处提及了color: #bbb且.active选择器不太具体，因此不会应用红色。

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改后的选择器的特异性现在是023，因为它还有一个类选择器作为复杂选择器链的一部分。

Keegan Street建立了一个非常好的特异性计算器，可用here。在您完全熟悉特异性计算之前，这非常有用。

Answer 2

您可以像这样更改活动类

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