Div 独特的 CSS 样式链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2501379/
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
Div Unique CSS Style Links
提问by Tom
I want to create unique styles for my links in a single particular div (So for example I want all links bold and red in the main body, but in the sidebardiv I want them blue and italic) How do I go about it?
我想在单个特定 div 中为我的链接创建独特的样式（例如，我希望主体中的所有链接都为粗体和红色，但在侧边栏 div 中我希望它们为蓝色和斜体）我该怎么做？
I have:
我有：
a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}
however if I put that in the sidebar div section it messes up my }'s
但是，如果我把它放在侧边栏的 div 部分，它会弄乱我的 } 的
回答by PatrikAkerstrand
Use descendant selectors:
使用后代选择器：
#sidebar a:link{ color:#134896; }
#sidebar a:visited{ color:#330033; }
#sidebar a:hover{ color:#942A5F; }
#sidebar a:active{ color:#6FB25C}
This is a fundamental css selector type, and you can chain as many descendant selectors as you wish, i.e.:
这是一个基本的 css 选择器类型，您可以根据需要链接任意数量的后代选择器，即：
#content .navigation .header h1.red {
/* Properties */
}
This would match any <h1 class="red">that is a descendant of an element with class header, that is a descendant of an element with class navigationthat is an descendant of the element with id content.
这将匹配任何<h1 class="red">具有 class 的元素header的后代，即具有 class 的元素navigation的后代，该元素是具有 id 的元素的后代content。
Descendant selectors is one of the few selector types that actually works across browsers, so you can rely on them. It should be noted that you should have as few selectors as possible to achieve your targetting, as this will be a performance boost. Also, try not to specify the element type if you can avoid it (this is contradictory to the advice for JavaScript selectors), since it will tie your css to how the html looks now. A developer can decide to change a <span class="highlight">to an <em class="highlight">later, which would break a span.highlight-selector, while a .highlight-selector would continue to work.
后代选择器是少数可以跨浏览器实际工作的选择器类型之一，因此您可以依赖它们。应该注意的是，您应该使用尽可能少的选择器来实现您的目标，因为这将提高性能。此外，如果可以避免，尽量不要指定元素类型（这与 JavaScript 选择器的建议相矛盾），因为它会将您的 css 与 html 现在的外观联系起来。开发人员可以决定将 a 更改<span class="highlight">为<em class="highlight">以后，这会破坏span.highlight-selector，而.highlight-selector 将继续工作。
回答by jayendra naran bhai sondarva
a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }
回答by dove
#divId a:link{ color:#666666; }
回答by Kevin
div#div_id a:link {style}
Repeat this as many times as you like for each div, and :visited, :active, :hover states.
对每个 div 和 :visited, :active, :hover 状态重复多次。
回答by Michael Dean
a { font-weight: bold; color: red; }
#sidebardiv a { color: blue; font-weight: normal; font-style: italic; }
