什么是css选择器的适当排序？例如p.class或.class p [英] What is appropriate ordering of css selector? eg p.class or .class p

问题描述

虽然调试一些css我注意到这个声明的顺序有一个区别。第一个导致锚点内部的标题按照需要显示内联，第二个似乎不是：

  1 / a.aname {display：一致; margin：0px;} 
 2 / .aname a {display：inline; margin：0px;} 
 
< a name =downloadclass =aname>< h2>下载< / h2>< / a> 
  

我通常使用第二种形式来应用类样式。
这些应用的区别是什么，并且有什么指导规则何时使用每个？ （避免因错误而出现的css拼图）

---

答案的基本解决方案：

使用直接选择 elementtype.class {} 或 elementtype＃id {} 直接对样式应用样式。对于要在每次使用规则时影响一次的样式，例如。裕度改变，显示改变，非持续字体改变。

使用后代选择 .class elementtype {}

code>或 #id elementtype 以应用样式来键入named或classed元素的descendants / children。对于样式，其旨在改变元素下的元素类型的外观/在其应用的页面部分内，例如。继承对文本段的字体更改，继承对段落或列表元素的格式更改。

NBself：了解其他选择器也是asap;）

这个选择器 a.aname 将匹配锚元素与类 aname ，而 .aname a 将匹配作为具有类 aname 的元素的后代的锚点元素：

 < a class =aname>这符合第一条规则< / a> 
 
< span class =aname>< a>这符合第二条规则< / a>< / span> 
  

CSS组合器：

  space = descendant combinator 
 
> =子组合器（直接后代）
 
 + =相邻兄弟组合器
  

选择教程提供了相当不错的概述或选择器和组合器。

如果你使用选择器，你可以把标识符放在一起而没有组合器，它们之间的顺序并不重要。示例：

 ＃id.class {...} 
 .class＃id {...} 
  

While debugging some css i noticed there is a difference between this order of declaration. The first caused headings inside anchors to display inline as desired, the second seems not to:

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

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

I have mostly been using the second form to apply class styles. What is the difference in how these are applied, and are there any guide rules when to use each? (to avoid the css-puzzlement which arises when it's done wrong)

---

Basic solution from answers:

Use "direct selection" elementtype.class{} or elementtype#id{} to apply style to elements directly. For styling which is intended to affect once each time the rule is used eg. a margin change, a display change, a noninheriting font change. Direct selection does not inherit to child elements, it is applied to parent element only.

Use "descendant selection" .class elementtype{} or #id elementtype to apply style to type descendants/children of the named or classed element. For styling which is intended to change appearance of elementtypes under an element/within a section of page where it is applied eg. inheriting font changes to text sections, inheriting format changes to paragraphs or list elements. Descendant selection applies to all child elements but never the parent.

NBself: learn about other selectors too asap ;)

解决方案

The difference is the space between them, which is the descendant combinator in CSS.

The selector a.aname will match an anchor element with the class aname while the .aname a will match an anchor element that is a descendant of an element with the class aname:

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

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

CSS combinators:

space = descendant combinator

> = child combinator (direct descendant)

+ = adjacent sibling combinator

The Selectutorial gives a pretty good overview or selectors and combinators.

If you use selectors where you can put identifiers together without combinators between them, the order doesn't matter. Example:

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

这篇关于什么是css选择器的适当排序？例如p.class或.class p的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！