CSS:声明分组

Question

.box1 等的声明在下面的示例中分组。

也可以对 .box1 a 等做同样的事情吗？

.box1, .box2, .box3 {
   color: red; }

.box1 a {
   text-decoration:none; }

.box2 a {
   text-decoration:none; }

.box3 a {
   text-decoration:none; }

Note: I don't mean box1 a, box2 a, box3 a, is there something simpler than that?

Answer 1

是的，使用:matches。

:matches(.box1, .box2, .box3) a { text-decoration: none; }

这是 spec .这是一个 article关于:匹配。这是 MDN page ，将其称为 :any，因为目前它在供应商前缀版本 :-moz-any 和 :-webkit-any 下可用。不过，必须写出这两种类型的内容会破坏节省击键的意义。

如果你正在喝 CSS 预处理器 Kool-Aid，那么在大多数情况下你可以做 .box1, .box2, .box3 { a { text-decoration-none; } 。

理论上，您也可以使用 XPath(通过 document.evaluate)，使用如下表达式

//input[matches(@id, 'left\d*right')]

那是 XPath 2.0，它可能或可能在您浏览器的 document.evaluate 版本中工作。在 XPath 1.0 中，您需要一个丑陋的解决方法:

//*[starts-with(@id, 'left') and ends-with(@id, 'right') and 
  boolean(number(substring-before(substring-after(@id, "left"), "right"))]