基本选择器
回顾选择器
通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
新增基本选择器
子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器
基本选择器———子元素选择器
概念
子元素选择器只能选择某元素的子元素
语法格式
父元素 > 子元素 (Father > Children)
兼容性
IE8+、FireFox、Chrome、Safari、Opera
基本选择器———相邻兄弟元素选择器
概念
相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素
语法格式
元素 + 兄弟相邻元素（Element+Sibling）
兼容性
IE8、FireFox、Chrome、Safari、Opera
基本选择器———通用兄弟选择器
概念
选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
语法格式
元素 ～ 后面所有兄弟相邻元素（Element ～ Siblings）
兼容性
IE8、FireFox、Chrome、Safari、Opera
基本选择器———群组选择器
概念
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开
语法格式
元素1,元素2,元素3,......,元素n (Element1,Element2,....,Elementn)
兼容性
IE8、FireFox、Chrome、Safari、Opera
Element[attribute]
概念
选择所有带有attribute属性元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
Element[attribute = “value”]
概念
选择所有使用attribute = “value” 的元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
Element[attribute ～= “value”]
概念
选择所有attribute元素包含单词“value”的元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
Element[attribute ^= “value”]
概念
选择attribute属性值以“value”开头的所有元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
Element[attribute $= “value”]
概念
选择attribute属性值以“value”结尾的所有元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
Element[attribute *= “value”]
概念
选择attribute属性值包含“value”的所有元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
Element[attribute |= “value”]
概念
选择attribute属性值“value”或以“value-”开头的元素
兼容性
IE8、FireFox、Chrome、Safari、Opera
举个栗子
伪类选择器
- 动态伪类（锚点伪类，用户行为伪类）
- UI元素状态伪类
- CSS3结构类
- 否定选择器
- 伪元素
动态伪类
概念
这些伪类并不存在于HTML中，只有当用户和网站搅浑的时候才能体现出来
锚点伪类
:link, :visited
用法行为伪类
:hover, :active, :focus
UI元素状态伪类
概念
我们把“:enabled”,":disabled","checked"伪类称为UI元素状态伪类
兼容性
IE9+ 、 FireFox、Chrome、Safari、Opera
举个栗子
CSS3结构类
CSS3的:nth选择器
概念
我们把CSS3的:nth选择器也成为CSS3结构类
选择方法：
:first-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
Element:first-child
概念
选择属于其父元素的首个子元素的每个Element元素
兼容性
IE8+、FireFox、Chrome、Safari、Opera
举个栗子
Element:last-child
概念
指定属于其父元素的最后一个子元素的Element元素
兼容性
IE8+、FireFox、Chrome、Safari、Opera
举个栗子
Element:last-child(N)
概念
:nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素的类型
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
关于参数(N)
Element:nth-child(number)
选择某元素下的第number个Element元素
Element:nth-child(n)
n是一个简单表达式，取值从“0”开始计算。这里只能是“n”，不能用其他字母代替。
Element:nth-child(odd)、Element:nth-child(even)
odd和event是可用于匹配下标是奇数或偶数的Element元素的关键词（第一个小标是1）
Element:nth-last-child(N)
概念
匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
Element:nth-of-type(N)
概念
:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素的每个元素
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
Element:nth-last-of-type(N)
概念
匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
Element:first-of-type
概念
first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
Element:last-of-type
概念
:last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
Element:only-child
概念
:only-child 选择器匹配属于其父元素的唯一子元素的每个元素
兼容性
IE9+、FireFox、Chrome、Safari、Opera
举个栗子
Element:only-of-type
概念
:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
兼容性
IE9+、FireFox4+、Chrome、Safari、Opera
举个栗子
Element:empty
概念
:empty 选择器匹配没有子元素（包括文本节点）的每个元素
兼容性
IE9+、FireFox、Chrome、Safari、Opera
举个栗子
否定选择器(:not)
概念
:not（Element/selector）选择器匹配非指定元素/选择器的每个元素
语法格式
父元素:not(子元素/子选择器) （Father:not(Children/selector)）
兼容性
IE9+、FireFox、Chrome、Safari、Opera
举个栗子
伪元素——————Element::first-line
概念
根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化
说明
"first-line"伪元素只能用于块级元素
举个栗子
伪元素——————Element::first-letter
概念
用于向文本的首字母设置特殊样式
说明
"first-letter"伪元素只能用于块级元素
举个栗子
伪元素——————Element::before
概念
在元素的内容前面插入新内容
说明
常用“content”配合使用
举个栗子
伪元素——————Element::after
概念
在元素内容后面插入新内容
说明
常用“content”配合使用，多用于清除浮动
举个栗子
伪元素——————Element::selection
概念
用于设置在浏览器中选中文本后的背景色和前景色
兼容性说明
::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”
举个栗子
CSS权重
什么是权重
概念
当很对的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程
权重等级与权值
概念
行内样式(1000) > ID选择器(100) > 类、属性选择器和伪类选择器(10) > 元素和伪元素(1) > *(0)
权重计算口诀
从0开始，一个行内样式+1000, 一个id+100, 一个属性选择器、clas或者伪类+10、一个元素名或者伪元素+1