ID选择器与类选择器的组合不起作用

Question

>我不能将 ID-selctor 与类选择器结合使用。这让我感到困惑，因为我还使用了CSS验证器来检查错误。那么，为什么只有后者在我的代码中工作呢？

这是我的代码：

#result .red1 {
	color: #FF0000;
}
.red2 {
	color: #FF0000;
}

<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Answer 1

删除 ID 和类选择器之间的空格

#result.red1 {
color: #FF0000;
}

"#result .red1"表示在结果元素中找到类 red1。 不过，最好不要将ID用作CSS选择器。

Answer 2

您的选择器错误。在同一元素上具有 id 和类。

你不应该放一个空格，像这样：#result.red1

空格表示具有类 red1 的元素必须是具有 id 结果的元素的后代。

Answer 3

您的代码不起作用，因为您在#result和red1之间放置了一个空格。

#result.red1 {
	color: #FF0000;
}
.red2 {
	color: #FF0000;
}

<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Answer 4

要将class与id结合使用，请删除空格。也不要使用重复id。

#result.red1 {
	color: #FF0000;
}
.red2 {
	color: #FF0000;
}

<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Answer 5

请注意，空格在 CSS 选择器中具有特殊的语义。你写它的方式是"寻找一个带有id="result"的元素，里面有一个class="red1"的元素(见下面的第三行"颜色测试"(。

如果您希望两个选择器都引用相同的元素，则必须省略空格，即写入#result.red1或.red1#result。

此外，不要在 html 代码中使用重复的 ID。

#result1.red1 {
	color: #FF0000;
}
.red2 {
	color: #FF6600;
}
#result3 .red3 {
	color: #FF0066;
}

<span id="result1" class="red1">Test of Color</span>
<br>
<span id="result2" class="red2">Test of Color</span>
<br>
<span id="result3"><span class="red3">Test of Color</span></span>

Answer 6

#result .red1选择所有类red1元素内部的元素，IDresult。

例如：

<span id="result">
<span class="red1">Selected</span>
</span>

#result.red1选择具有 idresult和类red1的元素。

例如：您的情况。

因此，要解决您的问题，请删除#result和.red1之间的空格

#result.red1 {
color: #FF0000;
}

#result.red1 {
color: #FF0000;
}
.red2 {
color: #FF0000;
}

<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Answer 7

#result.red1 {
	color: #FF0000;
}
.red2 {
	color: #FF0000;
}

<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>