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定位每个div，其中还有.myclass。

虽然div .myclass将使用类div（AKA 后代选择器）定位.myclass标记内（位于任何节点深度）的每个元素。

此外..

div >.myclass还定位.myclass所有元素，这些元素都是div的直接子元素（AKA 子选择器）。

然后有相邻兄弟选择器（div +.myclass），它允许选择直接在另一个特定元素之后的元素。

总结还有div ~.myclass 一般兄弟组合选择器;它与相邻的兄弟组合选择器非常相似;区别在于被选中的元素不需要立即接替第一个元素，但可以出现在它之后的任何地方。

Answer 4

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

div span

任何跨度都是div的子级。一堂课不能是孩子。这就是为什么它不起作用。

tag.class

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

Answer 5

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

第二个说：选择具有myclass

类属性的每个mydiv元素

您可以找到一个好的参考here

在css中，element.class和element <space> .class之间的区别是什么

5 个答案: