Html 如何在多个div类和id'；s

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

例如：

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

不幸的是，这种方法似乎无效或无法被浏览器识别。 假设我不想给“十六列”类或span本身提供任何通用样式。我只想将非常特定的样式应用于这个非常特定的元素

如何选择跨度元素？

使用：

#footer>.thiven.columns>span

选择器不工作，因为引用同一元素的选择器之间有空格

e、 g.

.container#页脚

但是空格写着：“查找一个id为

footer

的元素，它是一个类为

container

的元素的一部分。”。但您的意思是：“找到一个包含类

容器
和id
页脚
的元素”，您可以通过不带空格的方式将它们连接起来：

e、 g.
.container#页脚

请参阅：
像这样重新排列选择器


#footer.container.十六列span{
字体大小：粗体；
}

这里有一些文字
#页脚span{font-weight:bold；}
给定您的代码：

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

选择与选择器
F
匹配的元素，该元素是选择器
E
的后代；您自己的选择器：

.container #footer .sixteen .columns span

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

选择一个
元素，在类
'columns'
的元素内，在类
'tecient'的元素内，在类
'container'的元素内，在
id=“footer”
本身的元素内；提供HTML：

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

该选择器可能过于复杂（假定
id
唯一地标识一个元素1），可以简单地重写为：

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

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

#footer span {
    /* CSS here */
}


注意，JavaScript中经常使用类名来表示状态、状态更改或某种交互；因此，将
id
与
类
（
#footer.container
）组合在一起并不一定是多余的，但如果不动态添加或删除该类，则它可能是多余的。与web开发中的所有事情一样，找出适合您的东西是值得尝试的；在大多数情况下，现代浏览器都足够快，向选择器添加类名不会显著降低速度，但要注意时间关键型用例，最好删除所有不必要的内容
参考资料：



应省略
.container
：这取决于
container
类是否用于指定事件已发生；或者任何其他状态已经改变，或者还没有改变。是的，但很可能
容器
不是这样的类，无论如何，链接到一个相当好的编码指南不会有什么坏处；）可能不会，但如果包括在内的话，它不会造成任何伤害，也不会造成微不足道的伤害。甚至是不必要的。谢谢你们的解释！
是一个元素，而不是类名。它应该是#footer spanOk，ok。你是最棒的。：）虽然此代码可以回答问题，但提供有关如何和/或为什么解决问题的附加上下文将提高答案的长期价值。确切地说，>代表直接子项，因此应该是一个比空格快的liiittlebit：）@Danny_Student让我们只称它为“child”，因为没有这样的
间接子项
。从技术上讲，
是直系后代组合词。@哈希姆库拉米是对的，“直系子女”称为子女，“直系子女”称为后代。@Danny_学生看一看：@NickRussler你有没有最喜欢的一个用于学习的组合词？谢谢你的广泛回答！只有一个答案可以统治所有人。
#footer .sixteen.columns span {
    /* CSS here */
}

#footer span {
    /* CSS here */
}