我什么时候需要放div。有两个CSS选择器？

Question

我只是想知道在我的样式表中一起使用两个css类时，何时需要放置div.cssclass。我通常使用有和没有它进行故障排除，直到它工作，这显然是很好和足够快，但我会很高兴知道最佳实践。

示例：

.cssclass1 .cssclass2 { }

VS

.cssclass1 div.cssclass2 { }

它是不是直接兄弟姐妹，即下一个嵌套在那里的课程？

Answer 1

如果这两个元素都是div，那么没有区别，除了

.cssclass1 .cssclass2 { 

比

快

.cssclass1 div.cssclass2 {

如果你让我们说：

<div class="cssclass1">
    <div class="cssclass2"></div>
    <a class="cssclass2"></a>
</div>

然后.cssclass1 .cssclass2 {会同时选择div和a，而.cssclass1 div.cssclass2 {则只会选择div。

Answer 2

区别在于特异性，因为如果您使用.cssclass1 .cssclass2，那么如果您使用.cssclass1 div.cssclass2，则所有具有该类的元素都会受到影响但受影响的是具有<div>类的cssclass2元素。

Answer 3

正如Jonjie所说，这是关于特异性的。这是一个例子......

div .cssclass2 {
  background-color: green;
}

.cssclass1 div {
  background-color: blue;
}

div div {
  background-color: orange;
}
<div class="cssclass1">
<div class="cssclass2">
hello
</div>
</div>

正如您所看到的，这里没有任何样式声明与我们的html完全匹配。那么，背景应该是什么颜色？ CSS有一种方法可以通过识别最特定于html的css来解决这种歧义。有一些关于理解CSS特异性的好文章。