如何将伪元素应用于具有特定类的元素的子元素？

Answer 1

为什么你不定位注释 div 内的段落？在我看来这就是你所要求的。

.note p::before {
  content: "NOTE: ";
}

<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>Non-note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>

Answer 2

您可以尝试使用

:has()

选择器

.note:not(:has(*)):before, /* when it has nothing select the note element*/
.note:has(*) :first-child:before { /* when it has something select the first child*/
  content:"Note: ";
  color: red;
}

<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>NON Note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>

在更好地支持

:has()

之前，您可以使用浮动：

.note::before { 
  content:"Note:";
  color: red;
  float: left;
  margin-right: 10px;
}

<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>NON Note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>