Html 使用 CSS 定位嵌套元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10644778/
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
Targeting nested elements with CSS
提问by McGarnagle
Let's say I have some deeply nested markup that I want to target with CSS. It could be anything, but for example:
假设我有一些深度嵌套的标记，我想用 CSS 定位。它可以是任何东西，但例如：
<div>
<div id='someid'>
<span class='someclass'>
<a class='link' href='alink'>Go somewhere</a>
</span>
</div>
<div>
Is it acceptable to write a CSS rule targeting the <a>tag directly, like this?
<a>像这样直接针对标签编写 CSS 规则是否可以接受？
a.link { font-size: large; }
Or is this considered non-standard that may fail in some browsers? Do I need to target each element in the chain like this?
或者这被认为是可能在某些浏览器中失败的非标准？我是否需要像这样定位链中的每个元素？
div div span.someclass a.link { font-size: large; }
采纳答案by lucuma
Both are completely acceptable to use and the answer depends on your specific solution. For instance if you have other areas where you are sharing common properties that are defined by that class you'd want to keep it as general as possible. If for instance you have a navigation and the links in that area share some common elements those could be defined by a.link
两者都完全可以使用，答案取决于您的具体解决方案。例如，如果您有其他区域共享由该类定义的公共属性，则您希望使其尽可能通用。例如，如果您有一个导航并且该区域中的链接共享一些可以通过以下方式定义的公共元素a.link
Then in your nested html, you might do something like
然后在您的嵌套 html 中，您可能会执行类似的操作
.someclass a.link {font-size:8px}to make that text smaller.
.someclass a.link {font-size:8px}使该文本更小。
Here is an article that discusses how the specificity works: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
这是一篇讨论特异性如何工作的文章：http: //coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
回答by powerbuoy
Both are perfectly valid, and which one you use depends on what you want to do.
两者都是完全有效的，您使用哪一个取决于您想要做什么。
If you are creating a generic class that you want to be able to use throughout your entire site regardless of element and wherethe element is, you should onlyuse .class. A good example for this is something like .iconwhich you may want to use on links, list items, headings etc. And you want to be able to use them everywhere.
如果您正在创建一个通用类，并且希望能够在整个站点中使用该类，而不管元素和元素在哪里，则应该只使用.class. 一个很好的例子是.icon你可能想在链接、列表项、标题等上使用的东西。你希望能够在任何地方使用它们。
If you're creating a class that is specific to/only works on one certain type element, it's best to use the element in the selector as well. An example of this would be a bullet list you want to display on one line, since this class requires the HTML to be a <ul>you should specify it in the CSS as well; ul.inline. This way you can use the "inline" class name for other elements as well, without the styling affecting both.
如果您正在创建一个特定于/仅适用于某个特定类型元素的类，最好在选择器中也使用该元素。一个例子是你想在一行上显示的项目符号列表，因为这个类要求 HTML 是<ul>你应该在 CSS 中指定的；ul.inline. 通过这种方式，您也可以将“内联”类名用于其他元素，而不会影响两者的样式。
If you're only using the class in order to select the element but it shouldn't have any generic styling you should be specific. For example, you may want the first paragraph in your #blog-postelement to be larger, then you should specify both #blog-postandthe class; #blog-post p.first(note that these types of classes are rarely needed anymore thanks to advanced selectors like :first-of-type, h2 + petc).
如果您仅使用该类来选择元素，但它不应该具有任何通用样式，则您应该是特定的。例如，您可能希望#blog-post元素中的第一段更大，那么您应该同时指定#blog-post和类；#blog-post p.first（请注意，由于诸如等高级选择器:first-of-type，很少需要这些类型的类h2 + p）。
Saying that ".linkis the best, a.linkis second best and a long selector is bad" is just wrong. It all depends on the situation.
说“.link是最好的，a.link次好的，长选择器不好”是错误的。这一切都取决于情况。
回答by Ana
It's actually recommended to use a.linkinstead of the long, ugly second option, which can cause specificity and performance issues.
实际上建议使用a.link而不是冗长、丑陋的第二个选项，这会导致特异性和性能问题。
It's even better if you use just .link. That's the best option.
如果您只使用.link. 那是最好的选择。
回答by supakeen
The more targeted you make your CSS the less flexible it becomes. It's your own trade off. If you are going to give the links a specific class like that I am pretty sure they'll be visually the same whether they appear inside this tree or outside of it so you can stick with your first example.
你的 CSS 越有针对性，它就越不灵活。这是你自己的权衡。如果你打算给链接一个这样的特定类，我很确定它们在视觉上是相同的，无论它们出现在这棵树内部还是外部，所以你可以坚持你的第一个例子。
回答by AJMaxwell
a.link is the best way to do it. If you want a certain a.link to be different from the rest, you'll need to add some weight to it.
a.link 是最好的方法。如果您希望某个 a.link 与其他链接不同，则需要为其添加一些权重。
a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */
Descendant selectors (line 2) aren't the most efficient way to add style to an element, so use them sparingly. Personally, I use them when I need to give special styles to a Global Class within a certain ID/Class.
后代选择器（第 2 行）并不是为元素添加样式的最有效方法，因此请谨慎使用它们。就个人而言，当我需要为某个 ID/类中的全局类提供特殊样式时，我会使用它们。
