Question

我想知道是否有任何方法可以使用CSS引用特定div中的所有div（例如，只使用一个CSS规则，我可以在<div>元素中创建所有内容 - 其中div元素在其中另一个<div>元素 - 有红色文字。）

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

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

在我的样式表中，是否有办法让“wrapper”div中div内的所有文本变为红色？

Answer 1

您只能使用CSS执行此操作：

#wrapper div {
    color: red;
}

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

Answer 2

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

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

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

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

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

Answer 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";
}

我可以选择另一个div中的所有div吗？

3 个答案: