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

您的选择器无法工作，但它绝对是＆＃34; 被浏览器识别。＆＃34;问题是，正如你所说，它不是有效的＆＃39; （对于您拥有的HTML结构）。

问题在于，在CSS中，空格意味着祖先 - 后代关系，所以：

E F

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

.container #footer .sixteen .columns span

在类<span>的元素内，在类'columns'的元素内选择'sixteen'元素，在id="footer"元素的元素内{ {1}};给HTML：

'container'

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

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

这个选择器可能过于复杂（假设#footer.container .sixteen.columns span { /* CSS here */ }唯一地标识了一个元素¹），并且可以简单地重写：

id

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

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

请注意，在JavaScript中经常使用类名来表示某种状态，状态变化或交互;因此，将#footer span { /* CSS here */ }与id（class）结合起来并不是绝对多余的，但如果未动态添加或删除该类，则可能是多余且不必要的。与网络开发中的所有内容一样，值得尝试找出适合您的内容;当代浏览器在很大程度上足够快，为选择器添加一个类名不会大大减慢速度，但要注意时间关键的用例，当它最好删除时一切并非绝对必要。

参考文献：

CSS Selectors (and combinators)。

Answer 2

使用：

#footer > .sixteen.columns > span

您的选择器不起作用，因为在引用相同元素的选择器之间有空格。

e.g。 .container #footer

但是空格如下：＆＃34;找到一个标识为footer的元素，该元素是descendant元素，其类为container＆＃34;。但你的意思是：＆＃34;找到一个元素container AND id footer＆＃34;你可以通过连接它们来做空间：

e.g。 .container#footer

请参阅：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 3

像这样重新排列你的选择

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

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

Answer 4

#footer span { font-weight: bold; }

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

4 个答案: