html - 多个 :selectors on one CSS element?

标签 html css css-selectors

我正在对一个 CSS 元素进行样式化,我想知道我是否可以在一个 CSS 元素上使用多个 :selectors

例如:

p:hover:after {
    content: "Hello!";
}

因为,当我希望 p 悬停时,我希望 :after 选择器也被调用。

最佳答案

那个具体的例子是完全有效的,它的作用是demonstrated here .

到目前为止,关于伪元素的主要限制是:

CSS3 Selectors - 7. Pseudo-elements (reference)

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.

因此,以下选择器都不起作用:p:hover:after:afterp:after:hover

对于可以在选择器中链接在一起的简单选择器的数量没有限制。而作为 @BoltClock states评论中只能有一个类型选择器或通用选择器。

CSS3 Selectors - 4. Selector syntax (reference)

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector.

这里是一个相关的长选择器:(example)

#parent:first-of-type:first-child > .child:last-child p:not(#element):not(#otherelement):hover:after

关于html - 多个 :selectors on one CSS element?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19966260/

相关文章:

html - 将表单与按钮对齐

css - 使用 tailwindCss 创建曲线

javascript - Puppeteer 查询选择器 - 如何获得第二个匹配项

php - 调用数学编辑器

javascript - 在第 N 个选择后防止复选框勾选(允许同一类别中的更多选项)

html - 为什么 Apple 的 native 邮件客户端会截断(不显示)HTML 的结尾?

html - 一般兄弟选择器 - 奇怪的行为

html - :nth-child and :nth-of-type not working

html - float 和媒体查询在 IE 中不起作用

javascript - 映射时数组中特定元素的输入文本字段?