具有内容但没有类的元素的 CSS 选择器

标签 css css-selectors

我需要能够组合下面的选择器,或使用其他方法,为有内容但没有类别的段落设置样式。

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。

更多信息,因为您可能想知道我为什么要这样做 - 用例是一个内容可编辑的输入框。这个想法是用户必须将允许的样式之一应用于他们的输入,并且必须突出显示他们错过的任何样式。我们设置了无类选择器,但我们使用的富文本控件在用户输入前需要一个空的段落,因此高亮样式在不应该出现的时候出现。富文本控件是必需的,因此我必须更改选择器。

最佳答案

如前所述,

  1. p:not([class]):not(:empty) 是正确的。
  2. 但是,您的 p 元素将匹配 :not(:empty) 如果它包含空格或任何其他元素,包括 br

如果您的富文本控件强制执行前导 p 元素,您可能需要使用不同的选择器(一个知道您的富文本控件的选择器,至少),不管它包含那个任性的 br 的事实。

关于具有内容但没有类的元素的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47783532/

相关文章:

html - div~div和div :not(:first-of-type)?的区别

CSS 选择二级元素

html - Internet Explorer 10 菜单项意外显示焦点轮廓

html - 如何防止 Bootstrap 按钮从其他类继承?

html - 为什么子菜单不与其父菜单右侧对齐?

javascript - [attribute != "value"] 是否存在于 CSS 中的任何位置,还是我刚刚编造的?

Selenium 的CSS查询

javascript - 无限图像自动收报机动画口吃

javascript - 如何为正文设置背景?

html - 如何通过展开空标签来分层背景图片?