javascript - 将CSS应用于特定div的所有元素

我有以下代码:

<div class="main">
	<div class="div1">
		<div>
			<p>
				<a href="#"></a>
			</p>
			<span></span>
		</div>
		<p>Loremp Loremp</p>
		<p>Loremp Loremp</p>
		<a href="#">Loremp Loremp</a>
		<span>Hello World</span>

	</div>

	<div class="div2">
		<p>Loremp Loremp</p>
		<p>Loremp Loremp</p>
		<a href="#">Loremp Loremp</a>
		<span>Hello World</span>
	</div>
</div>

我有什么办法可以将div1的所有元素作为目标，而不必将其应用于div2吗？

我想要做的是使CSS代码非常简单，而不必一一对应地针对div1的每个元素。

/*I want to make something like that but without affecting the div2*/

*{
 color: blue;
}

最佳答案

刚放

.div1 * {
 color: blue;
}

甚至更好，只是

.div1 {
 color: blue;
}

在我的第一段代码中，类div1的元素的所有子元素都将应用color: blue。

在第二个代码块中，只有具有div1类的元素才会应用color: blue，但是所有子元素也将继承它(除非它们覆盖它)。因此效果应相同。