如何在css中定位元素子元素答案

【问题标题】：how to target an element child in css如何在css中定位元素子元素
【发布时间】：2021-06-13 16:08:16
【问题描述】：

大家好，以我为例，我想以 3 元素为目标，并且我的标签不同，3 元素可以是 p 或 div 或其他东西，所以我只想定位 3 元素不管是什么，我都想选择 3 元素。

如果有帮助，我可以用 CSS 做到这一点吗？

例如：

<div>
  <p></p>
  <span><span>
  <div></div> //3 element here is div
  <a></a>
</div>

或者：

<div>
  <div></div>
  <span><span>
  <p></p> //3 element here is p
  <a></a>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

div > *:not(:last-child){
  background-color: red;
}

<div>
  <p>AAAAAAAAAAAAAAA</p>
  <span>AAAAAAAAAAAAAAA</span>
  <div>AAAAAAAAAAAAAAA</div>
  <a>AAAAAAAAAAAAAAA</a>
</div>

div > *:nth-child(-n+3){
  background-color: red;
}

<div>
  <p>AAAAAAAAAAAAAAA</p>
  <span>AAAAAAAAAAAAAAA</span>
  <div>AAAAAAAAAAAAAAA</div>
  <a>AAAAAAAAAAAAAAA</a>
</div>

【讨论】：

【解决方案2】：

如果你只想选择父 div（或任何其他元素）的前三个子元素，你可以这样做，

.parent:nth-child(1),
.parent:nth-child(2),
.parent:nth-child(3){
   //Your styles
}

上面的代码将选择父 div 的第一个、第二个和第三个孩子，我给了一个父类。此外，如果您想选择该父 div 的所有子项，您可以简单地这样做，

.parent > *{
  //Your styles
}

此代码将选择 .parent div 的所有子项

【讨论】：