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 { ... }

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

1 个答案: