我需要能够组合下面的选择器,或使用其他方法,为有内容但没有类别的段落设置样式。
p:not([class]) // selector for paras without a class attribute.
和
p:not(:empty) // selector for empty paragraphs.
尝试过
p:not([class]):not(:empty)
但无法在 Chrome 中使用。
解决方案必须是纯 CSS 和跨浏览器(仅限现代,这里没有 IE6!),并且没有 JS 或 JQuery。
更多信息,因为您可能想知道我为什么要这样做 - 用例是一个内容可编辑的输入框。这个想法是用户必须将允许的样式之一应用于他们的输入,并且必须突出显示他们错过的任何样式。我们设置了无类选择器,但我们使用的富文本控件在用户输入前需要一个空的段落,因此高亮样式在不应该出现的时候出现。富文本控件是必需的,因此我必须更改选择器。
最佳答案
如前所述,
p:not([class]):not(:empty)
是正确的。- 但是,您的
p
元素将匹配:not(:empty)
如果它包含空格或任何其他元素,包括br
。
如果您的富文本控件强制执行前导 p
元素,您可能需要使用不同的选择器(一个知道您的富文本控件的选择器,至少),不管它包含那个任性的 br
的事实。
关于具有内容但没有类的元素的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47783532/