css - CSS 语法差异

Question

这两种说法有什么区别？

a.class { color: red; }

和

.class a { color: red; }

我认为在第二个例子中，一个人会去“内部”类，比如

.class .class2 a { color: orange; }

但是你不能用第一个例子做到这一点

Answer 1

a.class将选择a具有 class 的元素，.class并将选择具有 class的元素内的.class a所有元素。a.class

对这个.class .class2 a { color: orange; }

它将选择a具有类的元素内的所有元素，该类.class2进一步嵌套在具有类的元素中.class

Answer 2

对于第一个，所有具有 class 类的 <a> 都将按照样式设置样式。

使用第二个，元素中的所有 <a> 都将按照样式设置样式。

Answer 3

a.class {color: red}.class将为任何带有红色类的锚标记着色。它只会影响具有该指定类的锚标记，因为没有空格分隔aand.class元素。

.class a { color: red; }会将父.class元素中的任何锚标记着色为红色。这次元素之间的空间声明了层次结构，要求 achor 标签在.class元素内。