CSS3基本选择器

对比CSS，CSS3新增了子元素选择器，相邻兄弟元素选择器，通用兄弟选择器，群组选择器
子元素选择器
概念：子元素选择器只能选择某元素的子元素
语法：
父元素 > 子元素
相邻兄弟元素选择器
概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们居然一个相同的父元素
语法：
元素 + 兄弟相邻元素
通用兄弟选择器
概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
语法：
元素 ~ 后面所有元素相邻元素
群组选择器
概念：把具有相同样式的元素分组在一起，每个选择器之间使用逗号"，"隔开
语法：元素1，元素2，…元素n
属性选择器

• Element[attribute]
  概念：选择所有带有attribute属性元素
• Element[attribute~=" value"](一般用class选择器,用于选取属性值中包含指定词汇的元素）
• Element[attribute=“value”]
• Element[attribute^=“value”] (选择attribute属性值以“value”开头的所有元素)
• Element[attribute$=“value”](选择attribute属性值以“value”结尾的所有元素
• Element[attribute*=“value”] (选择attribute属性值包含"value"的所有元素)
• Element[attribute|=“value”] （常用于js中id选择器,选择attribute属性值为“value”或以“value-”开头的元素）

伪类选择器
动态伪类
并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
分为两类：
-锚点伪类 :link :visited
-用户行为伪类 :hover :active :focus
其中a:focus: 对于表单 当光标进入时
UI元素状态伪类
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类
disabled 不可编辑状态，没有宽高
CSS3结构类
CSS3的:nth选择器：把CSS3的:nth选择器也称为CSS3结构类
:nth选择器
选择方法：
一、:first-child（选择属于其父元素的首个子元素的每个element元素）
兼容：IE9+、Firefox、Chrome、Safari、Opera
二、:last-child（选择属于其父元素的最后一个子元素的每个element元素）
三、:nth-child(N)（选择器匹配属于其父元素的第N个子元素，不论元素的类型）
兼容：IE9+、Firefox4+、Chrome、Safari、Opera
关于参数N：
（1）number：数字
（2）n是一个简单表达式，取值从“0”开始计算。这里只能是“n”,不等用其他字母代替，如2n为偶数，2n+1为奇数。
（3）odd（奇数）、even（偶数）：用于匹配下标是奇数或偶数的element元素的关键词（第一个的下标是1）
四、:nth-last-child(N) 匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
兼容：IE9+、Firefox4+、Chrome、Safari、Opera
五、:nth-of-type(N) 匹配属于父元素的 特定类型 的第N个子元素的每个元素（指定元素类型）
兼容：IE9+、Firefox4+、Chrome、Safari、Opera
六、:nth-last-of-type() 匹配属于父元素的 特定类型 的第N个子元素的每个元素，从最后一个子元素开始计数
七、:first-of-type 匹配属于父元素的 特定类型 的首子元素的每个元素（指定元素类型）
兼容：IE9+、Firefox、Chrome、Safari、Opera
八、:last-of-type 匹配属于父元素的 特定类型 的最后一个子元素的每个元素（指定元素类型）
兼容：IE9+、Firefox、Chrome、Safari、Opera
九、:only-child 匹配属于其父元素的唯一子元素的每个元素
兼容：IE9+、Firefox、Chrome、Safari、Opera
十、:only-of-type 匹配属于其父元素的特定类型的唯一子元素的每个元素（指定元素类型）
兼容：IE9+、Firefox4+、Chrome、Safari、Opera
十一、:empty 匹配没有子元素（包括文本节点）的每个元素
兼容：IE9+、Firefox、Chrome、Safari、Opera
否定选择器
:not(Element/Selecter)选择器匹配非指定元素/选择器的每个元素
语法格式：父元素：not（子元素/子选择器）
兼容性：IE9+、Firefox、Chorme、Safari、opera

附加一个CSS权重
行内样式（1000）> ID选择器（100）> 类，属性，伪类选择器（10）> 元素和伪元素（1）>*（0）

伪元素（向某些选择器设置他叔效果）
语法：
元素::伪元素

1. Element::first-line
   概念：根据’first-line"伪元素中的样式对Element元素的第一行文本进行格式化
   说明："first-line"伪元素只能用于块级元素
2. Element::before
   概念：在元素的内容前面插入新内容
   特点：
   第一个子元素
   行级元素
   内容通过content写入
   标签中找不到对应的标签
3. Element::after
   概念：在元素内容后面插入新内容
   注：常用"content"配合使用，多用于清除浮动
   div::after{ display: block; content:""; clear: both;}
   清除浮动三个样式 缺一不可
4. Element-selection
   概念：用于设置在浏览器中选中文本后的背景色与前景色