CSS4 :matches() for parent and not children element

标签 css css-selectors

CSS4 的新选择器 :matches() 允许我们这样写

:matches(section, article, aside) h1 {
    color: red;
}

/* instead of */

section h1, article h1, aside h1 {
    color: red;
}

但是,有什么办法可以写出比这更短的东西吗

section h1, section p, section span {
    color: red;
}

/* with something like */

section:matches(h1, p, span) {
    color: red;
}

其中 h1pspan 不能被视为 *

最佳答案

这个

section h1, section p, section span {
    color: red;
}

实际上是:

section :matches(h1, p, span) { /* note the space */
    color: red;
}

目前 如果启用了“实验性 Web 平台功能”标志,这在 Chrome 中有效。

section :matches(h1, p, span) {
  color: red;
}
<section>
  <h1>Red H1</h1>
  <p>Red Paragraph</p>
  <span>Red Span</span>
  <h2>Not red H2</h2>
</section>

Support虽然现在很穷

结果图像(对于那些没有标志的)

enter image description here

关于CSS4 :matches() for parent and not children element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51875033/

相关文章:

javascript - BlockUI 在阻止特定 DIV 时抛出 "has no method ' blockUI' "错误

html - 如何编码这种形式?

javascript - 捕获每 3 行,但如果它有 child 和分配的类(class)?

html - fa 图标不能与#tag_selector * {_CSS_} 一起使用

css - 是否有 "previous sibling"选择器?

php - 使用图像 URL 动态创建图像

css - Bootstrap 跨度和列之间有什么区别

html - 了解 CSS 选择器优先级/特异性

javascript - HTML/Javascript : Selecting uncles/aunts

css - 有人可以解释为什么 "nth-child"选择器的优先级高于 "hover"吗?