如果 p 元素没有 ul，如何应用 CSS 样式 [重复]

Posted 2023-03-06

【中文标题】如果 p 元素没有 ul，如何应用 CSS 样式 [重复]

【英文标题】：How to apply CSS style if the p element does not have a ul [duplicate]

【发布时间】：2020-04-26 07:07:09

【问题描述】：

我想将page-break-inside:avoid 属性应用于所有没有ul 元素的p 元素。

p 
    margin-top: 4pt !important;
    margin-bottom:6pt !important;
    page-break-inside:avoid;
    orphans: 4;
    widows: 2;

<p>Hello text </p>
   <p>hello <ul>
    <li>list </li>
   </ul>

我想排除第二段。可以通过 CSS 实现吗？我正在寻找一个 CSS 解决方案。

【问题讨论】：

不，不能排除带有ul 元素的p 元素。

半无关紧要，因为 p 标签不能包含 ul 标签。无效的 html 任何体面的浏览器都会将其呈现为 <p>...</p><p>...</p><ul>...

p 元素不能包含ul

谢谢。我主要用它来打印，没有显示错误。很好的一课。顺便说一句，总的来说，我确实搜索了很多天。

【参考方案1】：

您不能在p 元素中使用ul。至于标识符主题，唯一的选择是使用:has 伪类，但它是still not compatible。

您可以查看其文档here。

修改代码以改进结构。

你可以这样做：

<p>First paragraph</p>
<p>Second paragraph</p>
<ul>
   <li>Element 1</li>
   <li>Element 2</li>
</ul>
<p>Third paragraph</p>
<p>Fourth paragraph</p>

这样，如果您想影响紧跟在p 之后的ul，您可以使用这个选择器：

p ~ ul 
   color: red;

//Selects every <ul> element that are preceded by a <p> element

【参考方案2】：

您的代码无效。 p 元素只能包含短语内容https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element