CSS - 如何仅将样式应用于另一个div内的div？

Question

通过示例更容易解释：

我有一个在我的网页上多次使用的div ID。

我想在不更改其名称的情况下，对这些div中的1个进行不同的设置。

有没有办法设计这个1 div，如果它在另一个div内？

例如，我的页面包含许多内容：

<div id="text2">Some text</div>

我想改变的是：

<div id="container">
   <div id="text2">Some different styled text</div>
</div>

这可能吗？

PS。这完全适用于Wordpress，因此它们是动态生成的。使用style添加单个内联CSS将不起作用。这必须在我的外部CSS表格中完成。

Answer 1

在你的情况下，你可以将div作为一个孩子对待内部div，因此你可以使用这个css

#container #text2 {
  /* Unique Div Style */
}

如果你有一个重复的元素，你应该使用一个类而不是一个id是正确的。

如果你有很多

<div id="text2">Some text</div>

然后它应该真的像这样

<div class="text2">Some text</div>

如果你这样做那么你的CSS看起来就像那个你想要不同风格的ONE div一样

#container .text2 {
  /* Unique Div Style */
}

当然，前提是您的容器ID是唯一ID。

另外，如果您更改了代码并且使用类设置了重复元素，那么您可以将多个类应用于同一个元素。

像这样：

<div class="text2 text2new">Some text</div>

现在你可以为类.text2new

编写CSS了

.text2new{
    /* make sure your css code overrides the old class*/
}

如果在旧浏览器中正确显示网站对您来说很重要，那么不支持多个类别。

希望这更清楚。

Answer 2

尝试：

#container #text2 {
  /* YOUR CSS HERE */
}

Answer 3

如上所述，如果要将相同的样式应用于多个元素，请使用class而不是id。样式可以应用于指定结构之后的特定元素，这意味着在您的情况下，您应该使用

#container .text2 {
  // styles go here...
}

但是，如果text2仍然是id，则该样式将仅应用于找到该特定id的第一个元素。