在css中，元素.class和元素有什么区别<space>.class

Question

我一直在试图弄清楚为什么我的 css 在我有

mydiv .myclass { font-size: 24px !important; }

我只是碰巧尝试

mydiv.myclass { font-size: 24px !important; }

并且格式有效。

两者有什么区别？

Answer 1

没有空格意味着：使用 "myclass" 类应用于div 元素。
空格意味着：适用于div 内具有"myclass"类的元素。

/*Apply to div elements with the 'container' class*/
div.container{
  height: 100px;
  background-color: grey;    
}
/*Apply to elements with 'container' class which are inside a div*/
div .container{
  height: 10px;
  width: 10px;
  background-color: red;    
}

示例：https://jsfiddle.net/gdxva1k0/

Answer 2

第一种情况下的空间是后代组合子。例如，p .center 表示 p 标签中的元素，并且具有类中心;

第二个示例可以是 p.center，这意味着所有带有中心类的 p 标签。

Answer 3

此div.myclass针对每个也有.myclass div。

而div .myclass将使用类.myclass（AKA 后代选择器）针对div标记中的每个元素（在任何节点深度）。

此外。。

还有div >.myclass它针对所有元素，其.myclass直接是div的子元素（AKA 子选择器）。

然后是相邻的同级选择器（div +.myclass），它允许选择紧跟在另一个特定元素之后的元素。

结论还有div ~.myclass，这是一个通用的同级组合器选择器;它与相邻的同级组合器选择器非常相似;不同之处在于，被选择的元素不需要立即继承第一个元素，但可以出现在它之后的任何地方。

Answer 4

使用空格，它推断父元素的子元素。所以

div span

是div 的子级的任何跨度。 一个班级不可能是孩子。 这就是为什么它不起作用的原因。

tag.class

表示所有类型为 tag 和类 .class 的元素都将采用该样式。

Answer 5

第一个实际上说了以下内容：选择 mydiv 元素中的每个 .myclass（直接和间接子元素）。

第二个说：选择每个具有 myclass 类属性的 mydiv 元素

你可以在这里找到一个很好的参考