什么是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-puzzlement)

---

答案的基本解决方案:

使用"直接选择" 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 { ... }