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

Lei*_*nel 2 html javascript css

我有这个代码:

<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>
Run Code Online (Sandbox Code Playgroud)

有没有办法让我针对所有元素而div1没有应用它div2?

我想要做的是使CSS代码非常简单,而不必div1逐个定位每个元素.

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

*{
 color: blue;
}
Run Code Online (Sandbox Code Playgroud)

ale*_*esc 8

刚刚放

.div1 * {
 color: blue;
}
Run Code Online (Sandbox Code Playgroud)

或者更好,只是

.div1 {
 color: blue;
}
Run Code Online (Sandbox Code Playgroud)

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

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