学习笔记：css selector

 

css can be composed by:

 

selector { property: value; }

 

1. type selector

 

h1 {color: #36c;}

 

2. universal selector

* {color: #365;}

 

3. decendent selector

ul em {text-transform: uppercase; }

 

4. class selector

Tag.classValue {border: 1px solid #c00;}

 

5. id selector

#idvalue { text-align: right; }

 

上面这些选择器是所有浏览器都支持的。下面的选择器属于css2，在ie7, firefox等版本进行支持，ie6就可能不支持了。

 

6. child selector

fatherTag>childTag{font-weight: bold;}

 

7. attribute selector

p[lang]   p[lang="fr"]   p[lang~="fr"] p[lang|="fr"]

 

CSS sorting

1. Whether the selector is the HTML style attribute of an element, rather than a true selector.

2. The number of id attributes in the selector.

3. The number of other attribute (for example, [lang] , [rel] , [href] ) and pseudo-class (for example, :hover , :visited , :first-child ) names in the selector. Remember that class selectors (such as li.active ) are a type of attribute selector and are tallied up in this category.

4. The number of element (for example, a , li , p , and so on) and pseudo-element (for example, :before , :after , and so on) names in the selector.

CSS Box model

every element in your document tree has a content area; this could be text, an image, or so forth. Additionally, padding, border, and margin areas may surround that content area.

padding :

它是padding-top, padding-right, padding-bottom, padding-left的简写，可以带有1~4个参数。

对于4个参数，一次代表top, right, bottom, left的值，例如 padding: 80px 10px 5px 10px;

对于一个参数，代表4边的padding都相同，例如padding: 10px， 代表所有padding都是10px;

对于2个参数，bottom的值和top相同，left和right相同。例如padding: 80px 10px 5px;