我可以选择另一个 div 中的所有 div 吗？ [关闭]答案

【问题标题】：Can I select all divs inside another div? [closed]我可以选择另一个 div 中的所有 div 吗？ [关闭]
【发布时间】：2014-08-08 18:40:43
【问题描述】：

我想知道是否有任何方法可以使用 CSS 引用特定 div 内的所有 div（例如，仅使用一个 CSS 规则，我可以将所有内容都放在 <div> 元素内——该 div 元素在另一个 @ 987654322@元素--有红色文字。）

这听起来可能有点复杂，所以让我给你代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" lang="en" xml:lang="en">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Chic Cyles</title>

</head>

<body>
<div id="wrapper">
<h1>Chic Cycling</h1>
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius tincidunt nisl, nec laoreet risus lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi velit, imperdiet eu odio quis, lobortis eleifend mi. Cras neque neque, accumsan et urna et, bibendum fringilla nisl. Sed pretium congue magna. Phasellus id rutrum ipsum. Vestibulum id nulla eleifend ligula sollicitudin volutpat. Vivamus eu dolor luctus, sodales neque vitae, adipiscing erat. Duis adipiscing felis sed elit suscipit, nec egestas turpis ullamcorper. In auctor, lacus eget malesuada tristique, felis ipsum ultrices felis, sed mattis elit sapien quis ipsum. Nunc gravida nulla velit, non semper eros ullamcorper non. Vestibulum viverra orci vitae pharetra pulvinar. Sed vulputate sodales orci, nec gravida odio. Vivamus lobortis nec nisl ut lobortis.

Suspendisse at justo felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius tincidunt nisl, nec laoreet risus lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi velit, imperdiet eu odio quis, lobortis eleifend mi. Cras neque neque, accumsan et urna et, bibendum fringilla nisl. Sed pretium congue magna. Phasellus id rutrum ipsum. Vestibulum id nulla eleifend ligula sollicitudin volutpat. Vivamus eu dolor luctus, sodales neque vitae, adipiscing erat. Duis adipiscing felis sed elit suscipit, nec egestas turpis ullamcorper. In auctor, lacus eget malesuada tristique, felis ipsum ultrices felis, sed mattis elit sapien quis ipsum. Nunc gravida nulla velit, non semper eros ullamcorper non. Vestibulum viverra orci vitae pharetra pulvinar. Sed vulputate sodales orci, nec gravida odio. Vivamus lobortis nec nisl ut lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius tincidunt nisl, nec laoreet risus lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi velit, imperdiet eu odio quis, lobortis eleifend mi. Cras neque neque, accumsan et urna et, bibendum fringill.</p>
</div>
</div>
</body>
</html>

在我的样式表中，有没有办法让“包装器”div 内的 div 内的所有文本都变成红色？

【问题讨论】：

#wrapper div {color: red;}?
这个问题似乎离题了，因为它是关于最基本的 CSS 选择器的。
@Harry 不必要地具体；不需要第一个“div”
@TylerH：完全同意，伙计。最初我想发布div.wrapper，然后才意识到它是id，然后忘了编辑：D
请先尝试完成有关 CSS 选择器的最基本教程，然后再在这里提问 SO。它会让你受益更多。

标签： html css

【解决方案1】：

您可以仅使用 CSS 来做到这一点：

#wrapper div {
    color: red;
}

这是一种根据祖先选择元素的基本方法，通常称为后代选择器。使用此代码，它正在寻找一个具有 ID 为 wrapper 的祖先的 div。请注意，wrapper div 不必是任何地方的直接父级，只需 直接祖先（也就是说，它不能是“叔叔”。

【讨论】：

当#wrapper > DIV 中有一些标签时，这将不起作用。
@KushalJayswal 您评论中的选择器与我回答中的选择器不同。
我试图展示不同的做法。
为什么今天被否决了？ @KushalJayswal 你投了反对票吗？
不。我刚刚添加了评论。

【解决方案2】：

您应该在发布您的问题之前检查相关问题，因为问题似乎是基本问题。

您可以将此 CSS 添加到您的样式表中：

#wrapper div,
#wrapper div span,
#wrapper div em,
#wrapper div p{
    color: #f00;
}

或者你可以简单地写...

#wrapper div, 
#wrapper div *{
    color: #f00;
}

【讨论】：

【解决方案3】：

CSS：

#wrapper div{
    color: "red"
}

如果你想在页面加载后动态改变颜色，使用 jQuery：

$("#wrapper div").css({
    color: "red";
});

JavaScript 如果你要动态改变颜色，但不想加载 jQuery：

var myThing = document.querySelectorAll("#wrapper div");
for(var i = 0; i < myThing.length; i++){
    myThing[i].style.color = "red";
}

【讨论】：

请在标记否定时添加原因。
@AmitKansal：我没有投反对票，所以不能撤销，但我认为的原因是因为最初的答案是在没有必要/标记的情况下使用 jQuery。
我不会撤销我的 DV，因为你仍然建议使用 jQuery。 jQuery 不应该用于此类琐碎的任务！这就像用工业大锤将照片挂在墙上！
@LloydBanks 虽然这很好，但问题是当我在 Google 上搜索时，大约 90% 的时间我明确使用 -jquery。 jQuery 是如此多产，它实际上是一场瘟疫。小心添加不必要的依赖项。
Niet 是对的：这不需要任何类型的 JavaScript 来实现，并且为此任务引入它对于简单的颜色更改来说开销太大。您的 CSS 也不正确；它不适用于引号。所以对于那些东西，DV。