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; }

  

注意：我的意思并不是box1 a, box2 a, box3 a，还有比这更简单的东西吗？

Answer 1

匹配

有很多方法可以缩短这个CSS：

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

但是，大多数都需要更多HTML。 :matches伪类是不添加更多类的唯一方法。这是它的外观：

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

其他方法

但是，当您的HTML看起来像这样时，这不起作用：

<div class="box1"><a href="..."></a></div>
<div class="box2"><a href="..."></a></div>
<div class="box3"><a href="..."></a></div>
<div class="box4"><a href="..."></a></div>
<div class="box5"><a href="..."></a></div>

如果你看一眼，你可能会认为所有这些都具有相同的样式和轻微的样式差异，如果有人想要编辑你的代码，这是一个问题。为什么不在您想要受影响的所有元素上添加另一个类？这就是它将成为：

CSS

.container-box a {
  text-decoration: none;
}

HTML

另外一个好处是，HTML也更有说服力：

<div class="box1 container-box"><a href="...">...</a></div>
<div class="box2 container-box"><a href="...">...</a></div>
<div class="box3 container-box"><a href="...">...</a></div>
<div class="box4">...</div>
<div class="box5">...</div>

很明显，前三个盒子的样式比最后两个盒子更多。

是的，需要复杂的选择器，但另一个类简化了CSS，可以更容易地判断哪些元素受到影响。

标签选择器

div a {
  ...
}

HTML

这将选择内部带有a标记的所有div，如果您的所有div中都包含a标记，请不要使用此标记。但是，HTML将如下所示：

 <div class="box1"><a href="...">...</a></div>
 <div class="box2"><a href="...">...</a></div>
 <div class="box3"><a href="...">...</a></div>
 <div class="box4">...</div>
 <div class="box5">...</div>

容器

您还可以为元素创建容器并以这种方式选择它们。

CSS

.container div a {
  ...
}

HTML

<div class="container>
  <div class="box1"><a href="..">...</a></div>
  <div class="box2"><a href="..">...</a></div>
  <div class="box3"><a href="..">...</a></div>
</div>
<div class="box4">...</div>
<div class="box5">...</div>

显然，哪些是被选中的，哪些不是。

Answer 2

是的，请使用session_start(); $_SESSION。

:matches

这是spec。这是关于:matches(.box1, .box2, .box3) a { text-decoration: none; } 的{​​{3}}。这是article，它将其称为:matches，因为此时它在供应商前缀版本:any和:-moz-any下可用。但是，不得不写下这两种方法，这就是保存击键的重点。

如果您正在使用CSS预处理器Kool-Aid，那么在大多数情况下，您可以执行:-webkit-any。

理论上，你也可以使用XPath（通过.box1, .box2, .box3 { a { text-decoration-none; } }），使用表达式，例如

document.evaluate

这是XPath 2.0，可能或可能在浏览器的//input[matches(@id, 'left\d*right')] 版本中有效。在XPath 1.0中，您需要一个丑陋的解决方法：

document.evaluate