给定元素后代的 CSS 选择器答案

【问题标题】：CSS selector for descendants of a given element给定元素后代的 CSS 选择器
【发布时间】：2014-10-12 14:17:32
【问题描述】：

给定下面的 html（下面我只包含了三个 div，但让我们想象还有更多的 div）

<div id="1">
    <p>hi</p><p>Peter</p>
</div>
<div id="2">
    <p> hola</p><p>Peter</p>
</div>
<div id="3">
    <p>kaixo</p><p>Peter</p>
</div>

我想要一个选择器，可以为给定的<div id="x"> 选择所有<p>

CSS3 允许你设计这样的选择器吗？

谢谢！

【问题讨论】：

是的，我猜；但是，我在网上找不到任何示例；它在语义和操作上是否正确？
是的，您可以阅读有关 id 选择器和其他选择器 here 的更多信息。值得注意的是，您可能不想以数字开头您的 id 名称。您可以在this 答案中了解原因。
建议阅读真正的基础 CSS 教程。你可能比从developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/… 开始做得更糟。
我做了......和其他几个地方；我找不到像我这样的例子。感谢您的关注。

标签： css css-selectors

【解决方案1】：

要选择给定<div id="x"> 中的所有<p>s，您可以使用

#x p {
    // styling
}

#x 选择 id="x" 的元素，#x p 选择所有 ps 的后代 #x

【讨论】：

【解决方案2】：

考虑到所有的 id 都应该是唯一的，将一个类分配给你想要挑选出来的元素不是更好吗？然后，而不是选择所有的 id（理论上只是一个，你会得到你想要的元素。

<div id="1" class="blue">
    <p>hi</p><p>Peter</p>
</div>
<div id="2" class="blue">
    <p> hola</p><p>Peter</p>
</div>
<div id="3" class="green">
    <p>kaixo</p><p>Peter</p>
</div>

.blue p {
    //styling
}

【讨论】：

这是我的全局问题：我想将一个 html 字符串和一个 CSS 文件动态加载到一个容器中，并将这些样式从 css 文件应用到这个容器的元素。