Question

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

Answer 1

#content a具有比.div1 a更高的特异性，因此根据#content a设置链接的样式。尝试使用#content .div1 a而不是.div1 a。

Answer 2

您需要使.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。

使用Container Div CSS的CSS子链接

2 个答案: