如何选择所有嵌套的段落?

Question

我有以下HTML

<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
</div>

所以如果我想给里面的所有段落都设置样式，我就输入

.parentt p:nth-of-type {
border:1px solid red;
}

但是如果我有嵌套的段落，比如

<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>

那么我的CSS代码不工作。如何样式嵌套段落-nested p 1和nested p 2自动通过父在第一种情况下?

Answer 1

你可以使用后代选择器选择嵌套的子节点。

.parentt * p, .parentt > p{
color: red;
}

<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>

官方规范:5.5后代选择器

或

可以直接对.parenttdiv内的所有<p>应用属性。

.parentt p{
color:red;
}

<div class="parentt">
<h2>sdsd</h2>
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
<div class="my-div-with-nested-p">
<p>nested p 1</p>
<div> <p>nested p 2</p></div>
</div>
</div>