CSS组合器无法工作 - 一个空间的差异？

Question

我在页面上有两个旋转木马，需要以不同的方式设置它们。所以我有这个css组合器来为id元素中的子引导元素设置样式......

#menuCarousel .carousel { ...

哪个不符合我的预期。但是，如果我像这样关闭空间......

#menuCarousel.carousel { ...

应用样式。据W3Schools说，有一个空间，所以我在想我做错了什么。

这里发生了什么？

感谢。

以防html很重要：

<div id="menuCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

Answer 1

首先，在这种情况下，.carousel根本不是必需的，因为ID 必须是唯一的，仅此一项就足以选择div。

但是要了解你的问题，CSS选择器之间的空格将选择一个descandant元素。删除空格意味着选择具有该类的元素。

所以#menuCarousel .carousel { ...表示选择所有类别为carousel的元素，这些元素是ID为#menuCarousel的元素的后代。

#menuCarousel.carousel { ...表示选择ID为menuCarousel AND 类carousel的元素。

（另外，请注意，不要使用w3schools来学习CSS。使用https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors）

Answer 2

id =（＃）和class =（。）正在应用于同一个元素，所以我认为它们必须合并为#menuCarousel.carousel。否则它会在 #menuCarousel下找一个.carousel ，不是吗？

Answer 3

所以空格表示像这样的嵌套元素

<div id="parent" class="parent">
   <div class="child"></div>
</div>

#parent .child{background-color:blue;}

上面的例子会使子元素变为蓝色。

但是，两个没有空格的选择器用于在同一元素上使用两个不同的选择器来选择元素。所以

#parent.parent{background-color:blue;}

将父元素设为蓝色，与#parent

相同