如何将CSS选择器批次到一起？

Question

下面的CSS使div具有背景色。我想要实现的是:当用户单击锚链接时，他们单击的链接就会突出显示(在同一页面上)。因此，在下面的示例中，如果有一个类似于这个- index.php#content-5的achor链接，那么背景就会变黄(就像这里的堆栈溢出一样)

因此，它是可行的-但有一个聪明的方法使所有这些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 word开头。因此，在本例中，我们可以编写[id^="content"]，这意味着它的属性id以content word开头的所有元素。

​

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