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>覆盖
⑤自我提示
⑥删除注释和优化样式表