Question

nav ul {
}

nav ul li {
    margin-left: 7px;
}

nav.ul li a, a:link, a:visited {
    float: left;
    padding: 7px;
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
}

我只希望上面的代码为<nav></nav>

中的元素设置样式

然而现在它确实在nav元素之外设置了<a href="">。我怎样才能确保它符合我的要求？

Answer 1

您拥有它们的规则仅适用于nav元素，但以下情况除外：

nav.ul li a, a:link, a:visited {

此规则适用于a:link和a:visited。你想要这个：

nav.ul li a, nav.ul li a:link, nav.ul li a:visited {

Answer 2

这是因为这行不正确：

nav.ul li a, a:link, a:visited {

应该是：

nav ul li a, nav ul li a:link, nav ul li a:visited {

在逗号（，）之后，CSS正在应用于所有a标签，因为指定的选择器之前没有。此外，您在第一部分的nav ul中也有句号（。）。

Answer 3

更改您的规则：

nav.ul li a, a:link, a:visited

为：

nav.ul li a, nav.ul li a:link, nav.ul li a:visited

通过省略逗号分隔之间的nav.ul li部分，您可以有效地应用于nav.ul li之外的链接。

Answer 4

您的代码定位于：link和a：在不使用后代选择器的情况下访问。使用以下内容可以解决您的问题：

nav ul li a, nav ul li a:link, nav ul li a:visited {
    float: left;
    padding: 7px;
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

Answer 5

确保所有选择器前面都有nav ul li。

nav ul li a, nav ul li a:link, nav ul li a:visited {
    float: left;
    padding: 7px;
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

仅将CSS应用于元素中

5 个答案: