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>

小提琴演示

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

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

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,因为它还有一个类选择器作为复杂选择器链的一部分.

有一个非常好的特异性计算器,由基冈街建造,可在此处获得.在您完全熟悉特异性计算之前,这非常有用.