选择 CSS 中前面没有另一个元素

Answer 1

.wrapper:not(:has(div.icon)) div.text

应该这样做。

示例1（带图标）

.wrapper {
  display: flex;
  gap: 5px;
  border: 1px solid black;
  border-radius: 3px;
  width: 80px;
  padding: 5px;
}

 {
  padding-left: 40px;
}

<div class="wrapper">
  <div class="icon">🖼️</div>
  <div class="text">paintings</div>
</div>

示例2（无图标）

.wrapper {
  display: flex;
  gap: 5px;
  border: 1px solid black;
  border-radius: 3px;
  width: 80px;
  padding: 5px;
}

.wrapper:not(:has(div.icon)) div.text {
  padding-left: 40px;
}

<div class="wrapper">
  <div class="text">paintings</div>
</div>

Answer 2

.text:not(.icon + .text)

应该可以解决问题

.wrapper {
  display: flex;
  gap: 5px;
  border: 1px solid black;
  border-radius: 3px;
  width: 80px;
  padding: 5px;
}

.text:not(.icon + .text) {
  padding-left: 24px;
}

<div class="wrapper">
  <div class="icon">🖼️</div>
  <div class="text">paintings</div>
</div>

<div class="wrapper">
  <div class="text">paintings</div>
</div>