基本选择器
-
回顾选择器
- 通配符选择器
- 元素选择器
- 类选择器
- ID选择器
- 后代选择器
-
新增基本选择器
- 子元素选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 群组选择器
子元素选择器
概念：子元素选择器只能选择某元素的子元素
语法：父元素 > 子元素 （Father>Children）
兼容性：IE8+、Firefox、Chrome、Safari、Opera
相邻兄弟元素选择器
概念：相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且她们具有同一个相同的父元素
语法格式：元素 + 兄弟相邻元素 (Element + Sibling)
兼容性：IE8+、Firefox、Chrome、Safari、Opera
通用兄弟选择器
概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
语法格式：元素 ~ 后面所有兄弟相邻元素 (Element ~ Siblings)
兼容性：IE8+、Firefox、Chrome、Safari、Opera
群组选择器
概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开
语法格式：元素1，元素2.....，元素n
兼容性：IE6+、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
: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-child
- :only-of-type
- :empty
Element:first-child
概念：选择属于其父元素的首个子元素的每个Element元素
兼容性：IE8+、Firefox、Chrome、Safari、Opera
Element:last-child
概念：选择属于其父元素的最后一个子元素的Element元素
兼容性：IE8+、Firefox、Chrome、Safari、Opera
Element:nth-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和even是可用于匹配下标是奇数或偶数的element元素的关键字（第一个下标是1）
Element:nth-last-child(N)
概念：匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
Element:nth-last-of-type(N)
概念：匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
Element:last-of-type(N)
概念：:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
Element:only-child(N)
概念：:only-child 选择器匹配属于其父元素的唯一子元素的每个元素
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
Element:only-of-type(N)
概念：:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
Element:empty
概念：:empty 选择器匹配没有子元素（包括文本节点）的每个元素
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
否定选择器
概念：:not(Element/Selector)选择器匹配非指定元素/选择器的每个元素
语法格式：父元素:not（子元素|子选择器）(Father:not(Children|selector))
兼容性：IE9+、Firefox4+、Chrome、Safari、Opera
伪元素
伪元素 ———— Element::first-line
概念：根据”first-line“伪元素中的样式对element元素的第一行文本进行格式化
说明：”first-line“伪元素只能用于块级元素
伪元素 ———— Element::first-letter
概念：用于向文本的首字母设置特殊样式
说明：”first-letter“伪元素只能用于块级元素
伪元素 ———— Element::before
概念：在元素的内容前面插入新内容
说明：常用content配合使用
特点：
- 永远是第一个子元素
- 行级元素
- 内容通过content写入
- 标签中找不到对应的标签
伪元素 ———— Element::after
概念：在元素的内容后面插入新内容
说明：常用content配合使用，多用于清除浮动
伪元素 ———— Element::selection
概念：用于设置在浏览器中选中文本后的背景与前景色
兼容性说明：::selection在IE家族中，只用IE9+版本支持，在firefox上要添加前缀-moz
CSS权重
- 什么是权重
当很多规则被应用到某一个元素上时，权重是一个决定那种规则生效，或者是优先级的过程
- 权重等级与权值
行内样式（1000）>ID选择器（100）> 类、属性选择器和伪类选择器（10）> 元素和伪元素（1）> *（0）
- 权重计算口诀
从0开始，一个行内样式+1000，一个ID+100，一个属性选择器、class或者伪类选择器+10，一个元素名或者伪元素+1