仅在父母有特定兄弟姐妹的情况下才定位孩子

Question

我无法控制标记，但是这是标记的呈现方式。

<div class="div1">

  <div class="div2">
    <p>Dont not select me</p>
  </div>

</div>


<div class="div1">
    <strong> 
    <p>Do not select me </p>
    </strong>
   <div class="div2">
    <p>Select me only with css </p>
   </div>
</div>

我想针对p在标签div2只有div1有一个兄弟姐妹strong周围。

那可能吗？

更新：我错了。

Answer 1

使用相邻的兄弟选择器 + ：

 .div1 strong+.div2 p { background: tomato; } 

 <div class="div1"> <div class="div2"> <p>Dont not select me</p> </div> </div> <div class="div1"> <strong> <p>Do not select me </p> </strong> <div class="div2"> <p>Select me only with css </p> </div> </div> 

Answer 2

定位作为.div2子级的p ，该子.div2是strong的同级：

 strong ~ .div2 > p { color: red; } 

 <div class="div1"> <div class="div2"> <p>Dont not select me</p> </div> </div> <div class="div1"> <strong> <p>Do not select me </p> </strong> <div class="div2"> <p>Select me only with css </p> </div> </div> 

Answer 3

使用通用的同级组合器~

 .div1 strong ~ .div2 p { color: red; font-weight: bold; } 

 <div class="div1"> <div class="div2"> <p>Dont not select me</p> </div> </div> <div class="div1"> <strong> <p>Do not select me </p> </strong> <div class="div2"> <p>Select me only with css </p> </div> </div> 

Answer 4

用它来选择它。

.div1 strong + .div2 > p

这是使用相邻的兄弟姐妹和兄弟姐妹选择器https://www.w3schools.com/css/css_combinators.asp