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)
刚刚放
.div1 * {
color: blue;
}
Run Code Online (Sandbox Code Playgroud)
或者更好,只是
.div1 {
color: blue;
}
Run Code Online (Sandbox Code Playgroud)
在我的第一个代码块中,所有带有类的元素的子元素div1都将被color: blue应用.
在第二个代码块中,只有具有类的元素div1才会被color: blue应用,但是所有子元素也将继承它(除非它们覆盖它).因此效果应该是相同的.