0

我在一个 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;
}
4

2 回答 2

4

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

于 2012-06-12T19:11:54.800 回答
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。

于 2012-06-12T19:18:34.437 回答