css 选择器的适当顺序是什么？例如 p.class 或 .class p

Question

在调试一些 css 时，我注意到这种声明顺序之间存在差异。第一个导致锚内的标题根据需要显示内联，第二个似乎不是：

1/ a.aname { display:inline; margin:0px;}
2/ .aname a { display:inline; margin:0px;}

<a name="download" class="aname"><h2>Download</h2></a>

我主要使用第二种形式来应用类样式。 它们的应用方式有什么区别，何时使用它们是否有任何指导规则？ （避免做错时出现的 css 困惑）

---

答案的基本解决方案：

使用“直接选择”elementtype.class{} 或elementtype#id{} 将样式直接应用于元素。对于每次使用规则时旨在影响一次的样式，例如。边距更改、显示更改、非继承字体更改。直接选择不会继承到子元素，它只适用于父元素。

使用“后代选择”.class elementtype{} 或 #id elementtype 将样式应用于类型命名或分类元素的后代/子代。对于旨在更改元素下/在应用它的页面部分内的元素类型外观的样式。继承文本部分的字体更改，继承段落或列表元素的格式更改。后代选择适用于所有子元素，但从不适用于父元素。

NBself：也尽快了解其他选择器 ;)

Answer 1

区别在于它们之间的空格，即CSS中的后代组合子。

选择器a.aname 将匹配带有aname 类的锚元素，而.aname a 将匹配作为aname 类元素后代的锚元素：

<a class="aname">This matches the first rule</a>

<span class="aname"><a>This matches the second rule</a></span>

CSS 组合器：

space = descendant combinator

> = child combinator (direct descendant)

+ = adjacent sibling combinator

Selectutorial 提供了一个很好的概述或选择器和组合器。

如果您使用选择器，您可以将标识符放在一起而无需在它们之间使用组合符，那么顺序无关紧要。示例：

#id.class { ... }
.class#id { ... }