如何选择不是任何 <em> 元素子级的 <p> html 元素？

Question

/* CSS */
em {font-style: italic; background yellow}
::autonomous-not-child-of-a-p-element-? :: em {font-style:normal; background gray}

鉴于两种情况都不同地使用

<em>

，因此需要采用不同的样式。 第一种情况包含一个段落元素，并在其中包含一个或多个

<em>

斜体样式的单词：

<p>...</p>
<p>A paragraph with a <em>word or two</em> in italic emphasis within the paragraph.</p>
<p>...</p>

第二段包含一个

<em>

包裹整个段落，使其本身成为一个段落，需要采用不同的样式：

<p>...</p>
<em>An entire paragraph in its entirety in italic emphasis.<em>
<p>...</p>

当最后一个

<em>

跨越整个段落并且不是

<p>

元素的子元素时，有没有办法自动以不同的方式重新设置样式？

Answer 1

您可以使用CSS中的层次结构/继承来定位p标签中的em，并使用普通em元素来定位em标签。

em { color: #F0F; }
p em { color: #F00; }

<p>...</p>
<p>A paragraph with a <em>word or two</em> in italic emphasis within the paragraph.</p>
<p>...</p>

<hr />

<p>...</p>
<em>An entire paragraph in its entirety in italic emphasis.<em>
<p>...</p>

希望，这有帮助。