CSS的基本选择器以及css3新增选择器

前提:E–表示element元素
date表示属性
首先，css中的基本选择器有：

• ID选择器：针对某一个特定的ID使用。写法：#id{}
• 类选择器: 针对所有的class类进行选择，写法：.class{}
• 标签选择器：对一类标签的选择，写法：标签{}
• 通配符选择器 写法： *{}
  还有一种就是群组选择器，将不同的标签组合起来就是一个劝阻选择器，例如： div ul li,div ol li, p{} （表示div下的ul下的li、div下的ol下的li和p元素一起选中）

---

以下则是对常用的css3的新选择器进行介绍：

1.结构伪类选择器

• E:nth-child(n) —— 同一个父元素下第n个E元素 (n=1,2,3…)
• E:nth-of-type(n) —— 同一个父元素下第n个孩子且元素类型必须是E元素加粗样式
  ( 注意上面两者的区别)
• E:empty：选择器匹配没有子元素（包括文本节点）的每个元素。
• E:first-child：同一个父元素下第一个子元素的所有E元素
• E:last-child —— 最后一个孩子
• E:nth-child(2n+1)或nth-child(odd) —— 奇数孩子
• E:nth-child(2n)或nth-child(even) —— 偶数孩子
• E:first-of-type —— 同一个父元素下第一个孩子且元素类型必须是E元素
• E:last-of-type —— 同一个父元素最后一个孩子且元素类型必须是E元素
• E:nth-last-of-type(n) —— 同一个父元素倒数第n个孩子且元素类型必须是E元素
  技巧：当 n<=0时，选择器选取无效，得到如下应用：
  选取前5个元素与E相同的子元素 E:nth-of-type(-n+5)
  选取后5个元素与E相同的子元素 E:nth-last-of-type(-n+5)

伪类选择器

a元素伪类

• a:link；连接点击之前
• a:hover；鼠标悬停（不仅限于a元素）
• a:visited；鼠标点击之后 访问之后
• a:focus； 获取焦点
  以上伪类需要同时使用时，位置不可以变

表单元素伪类选择器

• input:disabled；禁用
• input:enabled；启用
• input:focus；聚焦
• input:checked；选择

关系型选择器

• 后代选择器；div p{}； 只要出现在父元素的后代元素中 就会被覆盖
• 子选择器；div>p{}； 只能覆盖直接子元素（与div连接的第一个p标签）
• 相邻选择器；A+B{}； A紧挨着的后面与A同级的元素选择器
• 通用选择器；A~B{}； A后面的与B元素同级的元素选择器

属性选择器（多用于表单）

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
大致大用法为[标签属性=属性]
例子： input[type=text]：该选择器则是选择input标签type=text的标签；