第一行伪元素的Only-child伪类

Question

有没有办法避免＆＃34;红色突出显示＆＃34;在最后一个例子中？

Live Demo

<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;
}

但它似乎只是在所有演示中突破了所有亮点。

有没有办法达到预期的效果？ （删除＆＃34;红色突出显示＆＃34;来自上一个示例）。

（JS / jQuery解决方案也没关系，但是，如果可以用CSS解决，那就更好了。）

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

Answer 1

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

:only-child

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

Answer 2

我在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课程添加到不包含br代码的段落和仅属于子代的段落。

CODEPEN

Answer 3

请使用

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

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