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中的x = [0, 0, 0] all(map(lambda v: v==0, x)) # Evaluates to True x = [0, 1, 0] all(map(lambda v: v==0, x)) # Evaluates to False代码。

这可能吗？

更新：我错了。

Answer 1

使用adjacent sibling selector +：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

定位p .div2的孩子，strong是strong ~ .div2 > p { color: red; }的兄弟：

＆＃13;

<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>

＆＃13;

gulp-octo

＆＃13;

Answer 3

使用通用兄弟组合器~

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

用它来选择它。

.div1 strong + .div2 > p

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

仅在父母有特定兄弟姐妹的情况下瞄准儿童

4 个答案: