在调试一些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:尽快了解其他选择器;)