Only-child pseudo-class for first-line伪元素

Question

有没有办法避免最后一个例子中的"red highlight"？

<h3>should be:</h3>

    <div class="demo">
    <p>foo foo</p>
    <p>bar bar</p>
    </div>

<hr>

    <div class="demo">
    <p>foo foo<br>foo foo</p>
    <p>bar bar</p>
    </div>

<hr>

    <div class="demo">
    <p>foo foo<br>foo foo</p>
    </div>

<h3>should not be:</h3>

    <div class="demo">
    <p>foo foo</p>
    </div>

这是我目前使用的：

.demo p:first-child::first-line {
    color: red;
}

但是，它会突出显示所有示例，包括最后一个。我也试过这两个：

.demo p:first-child::first-line:not(:only-child) {
    color: red;
}

/* and... */

.demo p:first-child::first-line:not(:only-of-type) {
    color: red;
}

不过貌似把所有demo中的高光都打烂了

有什么方法可以达到预期的效果吗？（从最后一个示例中删除 "red highlight"）。

(JS/jQuery解决也可以，但是，如果能用CSS解决就更好了)。

具有所需结果的屏幕截图：

Answer 1

实现此目的的一种方法是在 :first-child 上设置颜色，然后用 :only-child 覆盖：

.demo p:first-child::first-line {
    color: red;
}

.demo p:only-child, .demo p:only-child::first-line {
  color: inherit;
}

示例：https://jsfiddle.net/4s42cnrL/4/

Answer 2

请使用

.demo:not(:last-of-type) p:first-child::first-line {
    color: red;
}

https://jsbin.com/doqenagapa/4/edit?html,css,output

Answer 3

我在 jQuery 中有解决方案。

CSS:

.demo p:first-child:first-line {
  color: red;
}
.demo .not-red:first-line {
 color: green !important;
}

JS:

$('.demo p:only-child:not(:has(br))').each(function() {
  $(this).addClass('not-red');
});

JS 只会将 not-red class 添加到不包含 br 标记的段落和唯一的子段落。

Only-child pseudo-class for first-line伪元素

Only-child pseudo-class for first-line pseudo-element

html

css

css-selectors

pseudo-class

pseudo-element

CODEPEN