第二天（CSS 选择器）

1、常用的CSS选择器

        类型选择器： 例如： p { color : red ; }

        后代选择器： 例如： h2 span { font-weight : bold ; }

        类选择器：     例如 ： . content { width : 200px ; }

        ID选择器：     例如： #nav { height : 40px ; }

        应用时，应注意html的结构，使结构合理，综合运用以上的选择器。防治页面中多 class 或者是 id

2、伪类

        例如： a : hover { color : red ; }

3、通用选择器

        例如： * { margin : 0px ;  padding : 0px ; }

         通用选择器一般可以匹配所有的元素，为他们重新制定样式；在与其他选择器结合使用时，通用选择器可以用来对某个元素的所有后代应用样式，或者跳过一级后代。

4、高级选择器

        子选择器： 例如： div > p { color : red ; }  只用于选择div元素的子元素 p。

        相邻同胞选择器： 例如：h2 + p { color : yellow ; }    选择h2元素的下一个兄弟元素 p元素。

        兄弟选择器： 例如：h2 ~ p { color : red ; }  选择h2元素的兄弟元素p元素

5、属性选择器：

 

Element [attr]	选择拥有该属性的元素
Element [attr = "val"]	选择拥有特定属性值的元素
Element [attr ~= "val" ]	选择属性的之中包含该属性值的元素
Element [attr ^= "val" ]	选择拥有以该值开头的属性的元素
Element [attr $= "val" ]	选择拥有以该值结尾的属性的元素
Element [attr *= "val" ]	选择该属性的值中包含该字符串的元素
Element [attr |= "val" ]	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

6、伪类选择器：

E: link	超链接未点击前的样式
E:visited	超链接点击后的样式
E:hover	鼠标移到超链接的样式
E:active	超链接点击时的样式
E:focus	获得焦点的样式
E:lang（en）	匹配使用特殊语言的元素
E:not（伪类选择器）	匹配不含有伪类选择器的元素E
E:root	匹配该元素在文档中的根元素
E:first-child	匹配元素的第一个子元素
E:last-child	匹配元素的最后一个子元素
E:only-child	匹配父元素仅有的一个子元素E
E:nth-child(n)	匹配第几个子元素
E:nth-last-child(n)	匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:first-of-type	匹配同类型中的第一个同级兄弟元素E
E:last-of-type	匹配同类型中的最后一个同级兄弟元素E
E:only-of-type	匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素E
E:empty	选择内容为空的元素
E:checked	匹配用于选中的表单元素（radio/checkbox)
E:enabled	匹配可用的表单元素
E:disabled	匹配不可用的表单元素
E:target	匹配相关URL指向的E元素。（锚点连接）

 

7、样式表的层叠性与特殊性（样式的应用优先）

        层叠性：

            ①标有！important 的用户样式

            ②标有！important 的作者样式

            ③作者样式

            ④用户样式

            ⑤浏览器/用户代理应用的样式

        特殊性：

            ①行内样式  >  内嵌样式  >  外联样式

            ②id  >  class  >  element

            ③选择符的特指度计算。

8、样式的继承性

        一般子元素会从其祖先元素处，继承相应的一些样式。

        继承的样式一般为 font、color等有意义的样式，像 margin、padding 将不会被继承。

9、规划、组织、维护样式表。

        ①尽量使用外联样式表。

                <link rel="stylesheet" type="text/css" href="#" />  相比于 @import("#") , 要快。

        ②所有代码是否分割，应根据站点的实际情况来决定。

                分割代码：按照一定的逻辑进行代码的分割，有利于后期的维护，与代码的复用。但是需要向服务器进行多次的申请，浪费资源。

        ③应用注释

        ④设计代码的结构

                <1>一般性样式：主体样式、reset样式、链接样式、标题、其他元素

                <2>辅助样式：表单、通知和错误、一致的条目

                <3>页面结构：标题、页脚、导航、布局、其他页面结构元素

                <4>页面组件：各个页面

                <5>覆盖

        ⑤自我提示

        ⑥删除注释和优化样式表