Question

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

这是我的代码：

#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和class。

你不应该放一个空格，如：＃result.red1

空格意味着具有类red1的元素必须是具有id结果的元素的后代。

Answer 2

您的代码无效，因为您在#result和red1之间留出了空格。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用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 4

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

IsFullScreen="false"

“＃result .red1”表示在结果元素中找到类red1 INSIDE。不过最好不要使用ID作为CSS选择器。

Answer 5

#result .red1选择ID为red1的元素中具有类result的所有元素。

例如：

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

#result.red1选择标识为result和类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 6

请注意，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 7

＆＃13;

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

＆＃13;

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

＆＃13;

ID-Selector与Class-Selector结合使用不起作用

7 个答案: