Question

您好请参阅以下两个HTML代码：

<div class="price">
  2
</div>

和

<div class="price">
 <div class="symbol">£</div> 2
</div>

所以在第一个我要添加£到价格所以我使用这个CSS

  .price::before {
     content: "£";
  }

它正在发挥作用。但如果.symbol课程中已存在.price课程，我不想要这样做。在CSS中有没有办法做到这一点？

Answer 1

你可以用纯CSS实现这个目的：

为什么

因此，CSS选择器的工作方式是选择器只能查询元素的父母或兄弟姐妹。不可能通过查询元素的子元素来创建一个选择器。你必须扭转秩序。这就是为什么你在.price::before { content: "£"; } /* Do not show the symbol if contained into a price element */ .price > .symbol { display:none; }课上工作并展示或隐藏它。

Answer 2

如果您将£符号作为默认值而.symbol用于不同符号，则会在评论中提及@BoltClock

您可以将pseudo类与position:absolute组合使用......

您必须将position:absolute应用于同一位置的pseudo元素和symbol类。如果没有symbol类，则伪元素:before将可见，如果symbol类存在，则它将在伪元素:before上方可见

这里棘手的部分是设置background-color:white类

的.symbol

Stack Snippet

＆＃13;

.price::before {
  content: "£";
  position: absolute;
  left: 0;
}

.price {
  display: inline-block;
  position: relative;
  padding-left: 20px;
}

.symbol {
  position: absolute;
  left: 0;
  background: #fff;
}

＆＃13;

<div class="price">2</div>
<br>
<div class="price">
  <div class="symbol">$</div> 4
</div>

＆＃13;

Answer 3

你可以通过jquery检查这个类，它是一个很好的aproch。

if( $('.price').hasClass('symbol') ) {
  // ...
}

Answer 4

仅使用CSS无法实现此目的。你需要一些jquery。

我的jQuery代码正在做的是将.symbol-present类添加到具有.price元素的.symbol，然后我的CSS代码会相应地添加符号。

$(".price").addClass(function(){
  return $(this).find(".symbol-present").length > 0 ? "symbol":"";
})

.price:not(.symbol-present)::before {
  content: "£";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">
  2
</div>

<div class="price">
  <div class="symbol">£</div> 2
</div>

如果不是子类条件，添加css

4 个答案:

为什么