使用CSS删除起始块和结束块行为

Question

是否有CSS这样的方法：

hi 
<div>
<p>
hello 
</p>
<p>
world 
</p>
</div>
baz

将呈现如下：

hi hello
world baz

而对于相同的CSS，则为：

hi 
<div>
<p>
hello world 
</p>
</div>
baz

会这样渲染吗？

hi hello world baz

和

hi 
<div>
<p>
hello 
</p>
<p>
foo
</p>
<p>
world 
</p>
</div>
baz

会这样呈现：

hi hello
foo 
world baz

我尝试过的

在这个小提琴中，你可以看到我在玩第一个孩子和最后一个孩子的伪选择器，但没有用。

https://jsfiddle.net/lovinglobo/0zbvdpao/

我无法控制外部库的HTML呈现，这就是我尝试CSS voodoo的原因。然而，我不是CSS大师。

Answer 1

如下：

div {
display: contents; /* this will make the div disappear */
/* display:inline can also do the job but let's learn a new value ;) */
}
p {
display:inline; /* p as inline */
}
p + p::before { /* add a line break if there is a second p */
content:"A";
white-space:pre;
}

hi
<div>
<p>
hello
</p>
<p>
world
</p>
</div>
bar
<hr> 
hi
<div>
<p>
hello world
</p>
</div>
bar
<hr>

hi 
<div>
<p>
hello 
</p>
<p>
foo
</p>
<p>
world 
</p>
</div>
baz

Answer 2

很抱歉，但前面的答案在包括IE3-11在内的各种旧浏览器中都不起作用，因为他使用的是不必要的更新CSS。您也不需要所有这些伪元素。删除边距和填充是可选的。我喜欢删除这些以保持样式干净，以防浏览器中的UA样式表或"重置"工作表更改了p元素上的样式。编程中的第一条规则是保持简单！第二条规则是始终支持旧浏览器！以下版本应适用于99.99%的已知浏览器：

hi 
<div style="display:inline;margin:0;padding:0;">
<p style="display:inline;margin:0;padding:0;">
hello 
</p>
<p>
foo
</p>
<p style="display:inline;margin:0;padding:0;">
world 
</p>
</div>
baz

• 根据需要将这些内联样式移动到类中