Html 如何设置一种样式以覆盖 CSS 中的另一种冲突样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/549828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I set one style to override another conflicting style in CSS?
提问by Thomas G Henry
I'm displaying links that get marked as read in a database when a user clicks them. I want to style the clicked and unclicked links based on the database information not the user's browser history. So far, when I use:
我正在显示当用户单击它们时在数据库中标记为已读的链接。我想根据数据库信息而不是用户的浏览器历史记录设置点击和未点击链接的样式。到目前为止，当我使用：
10 a:visited {
11 color: #444;
12 }
13
14 a:link {
15 font-weight: bold;
16 color:black;
17 }
18
19 .read {
20 color: #444!important;
21 }
22
23 .unread {
24 font-weight: bold!important;
25 color:black!important;
26 }
and
和
<tr class="even">
<td><a class="read" href="example.com">blah</a></td>
</tr>
<tr class="odd">
<td><a class="unread" href="example.org">foo</a></td>
</tr>
and a link has been visited, but not from this page (it's still marked as unread in the database), I get weird results. For example only the color will work, but the weight won't, etc.
并且已经访问了一个链接，但不是来自这个页面（它在数据库中仍然被标记为未读），我得到了奇怪的结果。例如，只有颜色会起作用，但重量不会，等等。
Is it possible to have one style override another when they conflict?
当它们发生冲突时，是否可以让一种样式覆盖另一种样式？
Thanks!
谢谢！
EDIT: updated code to clarify
编辑：更新代码以澄清
Solution
解决方案
10 a:link,
11 a:visited {
12 font-weight: bold;
13 color: black;
14 }
15
16 a.read {
17 color: #444;
18 font-weight: lighter !important; /* omission or even "normal" didn't work here. */
19 }
20
21 a.unread {
22 font-weight: bold !important;
23 color: black !important;
24 }
采纳答案by Hyman Sleight
First of all, if you don't want the browsers own history to interfere with your styles then use the :visited pseudo-class to match the style of the non-visited link, then just apply classes manually based on your DB records.
首先，如果您不希望浏览器自己的历史记录干扰您的样式，则使用 :visited 伪类来匹配未访问链接的样式，然后根据您的数据库记录手动应用类。
Regarding conflicting styles, it's all about the specificityof the selector, and if two with the same properties conflict (have the same specificity) the last one "wins".
关于冲突的样式，这完全是关于选择器的特殊性，如果两个具有相同属性的冲突（具有相同的特殊性）最后一个“获胜”。
Do this:
做这个：
a:link,
a:visited {
font-weight: bold;
color: black;
}
a.read {
color: #444;
}
回答by Ash
You can use the !important directive. eg.
您可以使用 !important 指令。例如。
.myClass
{
color:red !important;
background-color:white !important;
}
Place !important after each style as shown above when you need to override any other styles also being applied.
当您需要覆盖也应用的任何其他样式时，将 !important 放在每个样式之后，如上所示。
回答by Ria
Try:
尝试：
a.unread, a:visited.unread {style 1}
a.read, a:visited.read {style 2}
回答by strager
One, check your HTML to make sure class="read"and class="unread"are being added to your links.
一，检查你的HTML，以确保class="read"与class="unread"被添加到您的链接。
Two, try adding ain your .readand .unreadCSS rules:
二，尝试添加a您的.read和.unreadCSS 规则：
a.read { /* ... */ }
a.unread { /* ... */ }
If that doesn't work, try adding a space before !important. I don't think this is required, but most examples I have seeninclude it.
如果这不起作用，请尝试在!important. 我不认为这是必需的，但我见过的大多数例子都包含它。
回答by Mark Hurd
You can define specificity of your CSS selectors.
您可以定义 CSS 选择器的特性。
a { /* style 1 */ }
a { /* style 1 */ }
would be overridden by
将被覆盖
div a { /* style 2 */ }
div a { /* style 2 */ }
where divis a parent element of a
其中div是一个父元素a
More details can be found on Selectutorial.
更多细节可以在Selectutorial上找到。
