如何在多个div类和id中选择span元素？

Question

我总是想知道如何选择一个深深埋藏在其他具有类和id的元素中的元素？

例如 :

<div class="container" id="footer">
        <div class="sixteen columns"><span>some text here</span>

如果我想选择元素,那么我要做的是在CSS中写入以下内容:

.container #footer .sixteen .columns span {
            font-weight: bold;
        }

不幸的是,这种方法似乎无效或浏览器无法识别.让我们说我不想给"十六列"类或跨越本身任何一般风格.我只想将非常具体的样式应用于这个非常具体的元素.

我该如何选择span元素？

Answer 1

鉴于您的代码:

<div class="container" id="footer">
    <div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->

您的选择器无法工作,但绝对是" 浏览器识别 ".问题是,正如你所说,它不是"有效的"(对于你所拥有的HTML结构).

问题是,在CSS中,空格意​​味着祖先 - 后代关系,因此:

E F

选择一个匹配选择器的元素,F它是选择器的后代E; 你自己的选择器:

.container #footer .sixteen .columns span

选择一个<span>元素,类的元素中'columns',类的元素中'sixteen',一元件内id="footer"类的元件在其自身内'container'; 给HTML:

<element class="container">
    <element id="footer">
        <element class="sixteen">
            <element class="columns">
                <span></span>
            </element>
    </element>
</element>

这与您自己的HTML没有任何相似之处.由于白色空间建立了一个祖先 - 后代关系,所以推论是没有白色空间意味着相同的元素,这是你的目标,我想.省略白色空间,然后给出以下选择器:

#footer.container .sixteen.columns span {
    /* CSS here */
}

这个选择器可能过于复杂(假设id唯一标识元素¹),并且可以简单地重写:

#footer .sixteen.columns span {
    /* CSS here */
}

甚至,如果你愿意并且能够牺牲一些特异性:

#footer span {
    /* CSS here */
}

1. 请注意,类名通常在JavaScript中用于表示某种状态,状态更改或某种交互; 所以将a id与class(#footer.container)组合起来并不是多余的,但如果不动态添加或删除该类,则可能是冗余且不必要的.与网络开发中的所有内容一样,值得尝试找出适合您的内容; 现代浏览器是在大多数情况下足够快,即增加一个类名来选择不会显着慢下来,但要注意的时间关键使用情况,当它是最好删除一切,这不是绝对必要的.

参考文献:

• CSS选择器(和组合器).