使用CSS定位嵌套元素 [英] Targeting nested elements with CSS

问题描述

假设我有一些深度嵌套的标记，我想用CSS定位。它可以是任何东西，但是例如：

Let's say I have some deeply nested markup that I want to target with CSS. It could be anything, but for example:

<div>
    <div id='someid'>
        <span class='someclass'>
            <a class='link' href='alink'>Go somewhere</a>
        </span>
    </div>
<div>

是否可以编写以< a> / code>标签直接，像这样？

Is it acceptable to write a CSS rule targeting the <a> tag directly, like this?

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; }

推荐答案

对您的具体解决方案。例如，如果您有其他区域，您正在共享由该类定义的公共属性，则您希望将其保持为尽可能一般。例如，如果您有导航，并且该区域中的链接共享一些通用元素，那些可以由 a.link

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

然后在嵌套html中，您可以执行

Then in your nested html, you might do something like

.someclass a.link {font-size：8px} 使文本更小。

这里是一篇讨论特异性如何工作的文章： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Here is an article that discusses how the specificity works: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

这篇关于使用CSS定位嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！