div中有3个div。我已经将CSS设置为主div和子div的样式链接。但是div1链接似乎没有使用div1样式。
HTML
<div id="content">
<div class="div1">Sort By: <a href="" id="list_users_title" >A-Z</a> / <a href="" id="oneline">Genre</a></div>
<div class="div2">
<p>Random</p>
</div>
<div class="div3">
<p>Random</p>
</div>
</div>
CSS
.div1 {
font-family: 'Oswald', sans-serif;
font-size:16px;
color:#414042;
text-transform:uppercase;
text-align:right;
margin-top:-26px;
margin-bottom:18px;
}
.div1 a {color:#414042; text-decoration: none; }
.div1 a:visited {color:#414042; text-decoration: none;}
.div1 a:hover { color: #b91200; text-decoration: underline; }
#content a {color: #b91200; text-decoration: none;}
#content a:visited {color: #b91200; text-decoration: none;}
#content a:hover { text-decoration: underline; }
#content {
float: left;
width: 668px;
margin-left:50px;
margin-right:50px;
padding-top:42px;
}
答案 0 :(得分:4)
#content a
具有比.div1 a
更高的特异性,因此根据#content a
设置链接的样式。尝试使用#content .div1 a
而不是.div1 a
。
答案 1 :(得分:1)
您需要使.div1锚标记的样式级联更具体:
#content .div1 a {color:#414042; text-decoration: none; }
#content .div1 a:visited {color:#414042; text-decoration: none;}
#content .div1 a:hover { color: #b91200; text-decoration: underline; }
这将允许他们覆盖#content a style cascade。