后跟文本的元素的CSS选择器

Question

我有这两个段落：

q {font-style: italic;}

<p><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis</q></p>

<p><q>Fusce nec tellus sed augue semper porta. Mauris massa</q>. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

注意第二个quote元素确实not跨越了整个段落。

[不更改HTML，是否有CSS选择器可以匹配元素（在这种情况下为第二个quote），原因是后面跟随着更多内容？

换句话说：您将如何定位第二引号不带触摸HTML？

Answer 1

[您可以删除q元素引入的引号，而使用伪元素将其应用于p元素，如下所示：

p {
  font-style: italic;
}

p q {
  quotes: none;
}

p:before,
p:after {
  content: '"'
}

<p><q>Fusce nec tellus sed augue semper porta. Mauris massa</q>. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>