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

Question

我有这个代码:

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

Answer 1

随便放

.div1 * {
 color: blue;
}

或者更好的是，只是

.div1 {
 color: blue;
}

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

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