Question

来自chrome调试器：

element.style {
}

#title a:link,a:visited,a:hover,a:active {
    color: #FF33CC;
    text-decoration: none;
}

（以下所有内容都被打破了）

nav a:link,a:visited,a:hover,a:active {
    color: #000000;
    text-decoration: none;
}

nav a:link,a:visited,a:hover,a:active {
    color: #000000;
    text-decoration: none;
}

#title a:link,a:visited,a:hover,a:active {
    color: #FF33CC;
    text-decoration: none;
}

#title a:link,a:visited,a:hover,a:active {
    color: #FF33CC;
    text-decoration: none;
}

我试图弄清楚为什么元素（标题）没有正确显示。这就是html体内的样子：

<div id="title">
    <a href="link.html">link</a>
</div>

据我所知，当它被触及时，该风格并未被应用。我不明白的是 a）为什么要调用导航风格？ b）为什么多次调用链接的标题样式？它第一次似乎有效，但第二次被击中？（在网站上，该元素目前仅以黑色文字显示。）

提前致谢！

Answer 1

正在调用您的样式，因为导航父级仅适用于选择器的第一部分。基本上你有这个：

nav a:link,
a:visited,
a:hover,
a:active{

//style

}

你真正想要的是：

nav a:link,
nav a:visited,
nav a:hover,
nav a:active{

//Style

}

同样适用于#title a:link, a:visited, a:hover, a:active

我猜测为什么尝试多次使用相同的CSS会让你在多个地方拥有相同的CSS。例如。你要么

两次导入CSS
导入两个具有重复样式的CSS文件
在一个CSS文件中复制CSS

检查关联的行号并查看它们是否相同（意味着它实际上使用完全相同的CSS两次）或不同（意味着您在多个地方使用相同的CSS）。

Answer 2

你有：

#title a:link, a:visited, a:hover, a:active {
color: #FF33CC;
text-decoration: none;
}

但您似乎需要的是：

#title a:link, #title a:visited, #title a:hover, #title a:active {
color: #FF33CC;
text-decoration: none;
}

每个逗号后都必须出现id标记，否则您将为所有链接设置样式，而不仅仅是#title id的链接。

希望有所帮助！

CSS样式被多次应用

2 个答案: