如何将CSS选择器一起批处理？

Question

以下CSS使div具有背景颜色。我想要实现的是：当用户点击锚链接时，他们点击的链接突出显示（在同一页面上）。所以在下面的例子中，如果有一个这样的achor链接 - index.php#content-5那么背景就变成了黄色（就像在stackoverflow上一样）

所以它有效 - 但是有一种聪明的方法可以将所有这些div的批处理组合在一起吗？我在想像#content-1,#content-2,#content-3之类的东西 - 或者这是错误的做法？

谢谢！

#content-5 {
/*width: 75%;*/
margin: 0 auto;
background-color: #fff;
-webkit-transition: all 1s linear;
}

#content-5:target {
background-color: #ffa;
-webkit-transition: all 1s linear;
}

Answer 1

您可以使用属性选择器执行此操作。您可以编写所需的所有#contentXXX，并且只需要一个选择器。

[attribute^="value"] 表示定位 atribute 值的元素，该值以 value 字开头。因此，在这种情况下，我们可以编写 [id^="content"] ，这意味着其属性 id 的所有元素都以 content 字。

a { 
  border: 1px solid black;
  display: inline-block;
  padding: 3px;
}
[id^="content"] {
  margin: 0 auto;
  background-color: #fff;
  -webkit-transition: all 1s linear;
}

[id^="content"]:target {
  background-color: #ffa;
  -webkit-transition: all 1s linear;
}

<a href="#content1">Content 1</a>
<a href="#content2">Content 2</a>
<a href="#content3">Content 3</a>
<a href="#content4">Content 4</a>
<a href="#content5">Content 5</a>

<div id="content1">Content</div>
<div id="content2">Content</div>
<div id="content3">Content</div>
<div id="content4">Content</div>
<div id="content5">Content</div>

Answer 2

是。你可以只使用逗号就可以将样式规则同时应用于所有元素。

.box1,.box2,.box3{
  background: green;
}