如何选择所有嵌套段落？答案

【问题标题】：How can i selected all nested paragraphs?如何选择所有嵌套段落？
【发布时间】：2021-10-07 19:28:51
【问题描述】：

我有以下 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 像第一种情况一样自动通过父级？

【问题讨论】：

你要选择哪个元素？
您想要设置嵌套的p 以及普通的p 标签的样式吗？如果是这种情况，您可以删除您的 :nth-of-type，它会在 parentt 内设置所有 p 标签的样式
.parentt p {} 将为您提供此div 中的所有p 标签。
你试过这样吗？ p { /* css codes... */ } 在这种情况下，您不需要任何嵌套选择器，显然您之前没有搜索过：https://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css

标签： html css

【解决方案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 Descendant selectors

或

您可以直接将属性应用于.parentt div 中的所有<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>

【讨论】：