Question

正如您所看到的，下面的CSS代码是重复的，但我不够流利，不能简化它。

<!-- CLASS then ID -->
.myClass#firstID {
    background-color: #bbb;
}   

.myClass#secondID {
    background-color: #bbb;
}   
.myClass#firstID:hover {
    background-color: #000;
}   

.myClass#secondID:hover {
    background-color: #000;
}   

<!-- ID then CLASS -->
#myID.firstClass {
    background-color: #123456;
}   

#myID.secondClass {
    background-color: #123456;
}   
#myID.firstClass:hover {
    background-color: #111;
}   

#myID.secondClass:hover {
    background-color: #111;
}

有没有办法在一个块中设置具有多个id或具有多个类的id的类，而无需重复＆＃34; .myClass＆＃34;或＆＃34; #myID＆＃34;？

Answer 1

用逗号分隔每个id。

    .myClass#firstID ,.myClass#secondID,
#myID.firstClass, #myID.secondClass {
    background-color: #123456;
}

Answer 2

这是class的全部意义;您将类名下的类似组和id下的唯一项分组。所以你的CSS应该是这样的：

.myClass {
    background-color: #bbbbbb
}

.myClass:hover {
    background-color: #000;
}

我不明白你为什么要引用一个包含class和id的div。除非我在这里遗漏了别的东西。

Answer 3

#firstID, #secondID {
    background-color: #bbbbbb;
}   
#firstID:hover, #secondID:hover {
    background-color: #000;
}

Answer 4

提供的代码等同于：

columnVals.push(entry.getColumnValues());

它无法进一步浓缩。

此外，Sass provides nested selector functionality。

Answer 5

您可以在要实现相同样式属性的多个区域中使用相同的类或ID。希望能回答你的问题。

＆＃13;

#myid{
 background-color: purple;
}

.myclass{
 color: yellow;
}

＆＃13;

<div class="container">
	<div id="myid">
		<p class="myclass">your contend to be styled</p>
	</div>

	<div id="myid">
		<p class="myclass">Youe second contend to be styled</p>
	</div>
	
</div>

＆＃13;

CSS选择具有不同ID的类，反之亦然

5 个答案: