具体的语法为：

< rule > := < selector > {(< attribute >: < value >;) +}

• 不同的 html 标签（tag）有 不同的属性, 不同的属性取不同的值。

• html 是个树结构，这意味这个每个元素有父子元素。

• 因为 html 的组成结构。 Selector（选择器）可以根据元素的标签（ tag ）, 属性（ attribute ）以及属性的值， 元素的父子元素兄弟元素来定位和选择。

• 选择标签是 a 的元素

a {color:red}

上面这条 rule 意味着所有标签是 a 的元素全都涂成红色。

• 选择具有 href 属性的元素

* 是通配符，表示任何

*[href] {color: red}

• 选择所有 href 属性值为 "http://www.zhibo8.com" 的元素

*[href="http://www.zhibo8.com"] {color: red}

• 选出所有父元素的标签为 a 的元素。

a>* {color: red}

• 选出所有子元素的标签为 a 的元素 cannot be done

• 找出标签为a的所有元素的所有子孙元素

a * {color: red}

• 找出所有后代元素中有 a 标签元素的元素 cannot be done

• 对于上面的选择逻辑，如何做 与或并的逻辑操作。 selector1,selctor2 代表 selector1 or selector2

p,a {color: red}

标签是 p 或者是 a 的元素都会被涂红。

p {color: red}
a {color: red}

下面的表示 且

p[att1="val1"][attr2="val2"]

.href.name

简写:

• class selector:

.ask_title {color: red}

选择 class="ask_title" 的元素

• id selector:

#ask_title {color: red}

选择 id="ask_title" 的元素

warning: CSS cannot select parent.

• 伪类和伪元素

a:visited, a:link :after, :before :hover :not

• color

• rgb(a, b, c), a, b, c are numbers in 0-255.
• #abcefg, a,b,c,e,f,g are 0-9a-f, such as #ffffff
• #abc, a,b,c are 0-9a-f, such as #fff, #abc equals to #aabbcc
• literal, such as "white", "red", "yellow", "maroon".

• font

-size -bruce -font

• layout

• 绝大多数属性值会继承父元素的属性值

• specificity:

rule(selector) 的 specificity 是四个 0 或 1 组成的值

• id : 0, 1, 0, 0
• attribute: 0, 0, 1, 0
• tag: 0, 0, 0, 1
• *, pesudo class, 0, 0, 0, 0
• css in script: 1, 0, 0, 0
• css is linked, not contained in the current html: 0, 0, 0, 0

when two rules have the same specificity, the two rules are valid both. you can think that one rule apply to the html, and then another rule apply to the html. what you actually see is the style described by the rule which is applied last (that's the meaning of cascade). So in what order, css rule apply is important.

• css 来源:

• reader: any one who see the html page. chrome provide interface to modify css, the source of such css is reader.

• designer: the one who write css text for the html.

• agent: default css style of agent(usually a browser such as chrome.)

css rules from agent apply first, then designer's normal css rule, then reader's normal css rule, then designer's import css rule, at last the reader's import css rule. in each category the order which rule apply is the order css rule appears(in the css text).

!import p {font: italic arial,sans-serif !import; color: red; } p {font: italic arial, sans-serif} 特别指明是 !import 的，所以比其他 rule 有更高的优先级。