Question

是否可以隐藏第一个伪元素？

<div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>

此html元素具有如下伪样式：

.custom-condition::before {
   content: '';
   position: absolute;
   width: 1px;
   height: auto;
   min-height: 25px;
   border: 2px solid #f1f1f1;
   top: -25px;
   left: 50%;
   margin-left: -2px;
}

不可能做这样的事情吗？

.custom-condition:first-child::before {
   content: '';
}

还尝试添加span元素以避免像这样的psuedo元素：

<div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
   <div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
   <div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
   <div class="smallLine"></div>
</div>

只需将伪装样式复制到.smallLine

Answer 1

如果所有元素都在同一包装器内，则可以执行此操作。无需从第一个元素中删除伪元素，只需为所有其他元素（而不是第一个元素）定义它即可。

.custom-condition ~ .custom-condition::before {
  content: '[Before]';
}

<div>
  <div> OR </div>
  <div class="custom-condition"> AND </div>
  <div class="custom-condition"> AND </div>
  <div> OR </div>
  <div class="custom-condition"> AND </div>
</div>

UDPATE

您可以考虑将父元素与当前的HTML结构一起使用

.rule-container ~ .rule-container .custom-condition::before {
  content: '[Before]';
}

<div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>

如何隐藏第一个伪CSS元素

1 个答案: