我在主页列表项上添加了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>
为什么不改变?我需要更改一些代码吗?
答案 0 :(得分:5)
这是因为您有一个更具体的选择器,它将颜色设置为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;
}
&#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;
修改后的选择器的特异性现在是023,因为它还有一个类选择器作为复杂选择器链的一部分。
Keegan Street建立了一个非常好的特异性计算器,可用here。在您完全熟悉特异性计算之前,这非常有用。
答案 1 :(得分:0)
您可以像这样更改活动类
.active {
border: 1px solid red;
color: red !important;
}