一、css3之前的选择器

ID选择器，#

类选择器，.

包含选择器(E F)

伪类选择器（:link,visited,hover,active,focus,first-child）

伪元素选择器（::first-line,first-letter,before,after）

通配选择器(.)

属性选择器(foo[name='martin'])

子包含选择器(E>F)

相邻兄弟选择器(E+F)

二、css3新增选择器

新增属性选择器：

E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头

E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾

E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串

新增结构伪类选择器：

E:root 匹配文档所在的根元素

E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）

E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素

E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)

E:last-child

E:first-of-type

E:last-of-type

E:only-child

E:only-of-type

E:empty

另外，使用前要考虑浏览器版本，新增css3选择器存在兼容性问题。平时多多练习，多动手。

1.基础选择器

a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。

HTML

CSS

执行效果：

b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。

HTML

CSS

执行效果：

c.元素选择器：通过note节点名称匹配元素。

HTML

CSS

2.属性选择器：

注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。

CSS3新增了一些属性选择器，待持续更新。

3.组合选择器

示例如下：

实现效果如下：

示例如下：

从高到低依次是：

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

参考：

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器

CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）

1 E[att^="val"] 属性att的值以"val"开头的元素 div[id^="nav"] { background:#ff0}

2 E[att$="val"] 属性att的值以"val"结尾的元素

3 E[att*="val"] 属性att的值包含"val"字符串的元素

结构伪类选择器（过滤选择器）

(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。

由于IE6/7/8不支持，没办法，选择合适的场合用吧。)

4 E:root 匹配文档的根元素，对于HTML文档，就是HTML元素

5 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3) { color:#f00}

6 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child { background:#ff0}

7 E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red}选择父元素的第n个子元素p

8 E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素

9 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)

10 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

11 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

12 E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) p:only-child { background:#ff0}

13 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

14 E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty { background:#ff0}

与用户界面(UI)有关的伪类(ie6 7 8不支持)

15 E:enabled 匹配表单中激活的元素

16 E:disabled 匹配表单中禁用的元素 input[type="text"]:disabled { background:#ddd}

17 E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

18 E::selection 匹配用户当前选中的元素

级元素通用选择器

ie6不支持

19 E ~ F 匹配任何在E元素之后的同级F元素 p ~ ul { background:#ff0}

反选伪类

(ie6 7 8 firefox3.0以下 Opera9.0不支持)

20 E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc}

:target 伪类

(ie6 7 8不支持)

21 E:target 匹配文档中特定"id"点击后的效果

二、css3新增属性

一. box-shadow(阴影效果)

使用:

box-shadow: 20px 10px 0 #000

-moz-box-shadow: 20px 10px 0 #000

-webkit-box-shadow: 20px 10px 0 #000

支持:

FF3.5, Safari 4, Chrome 3

二. border-colors(为边框设置多种颜色)

使用:

border: 10px solid #000

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

说明:

颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555

支持:

FF3+

三. boder-image(图片边框)

使用:

-moz-border-image: url(exam.png) 20 20 20 20 repeat

-webkit-border-image: url(exam.png) 20 20 20 20 repeat

说明:

(1). 20 20 20 20 --->边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果

(2). 边框图片效果(目前仅实现了两种):

repeat --- 边框图片会平铺, 类似于背景重复

stretch --- 边框图片会以拉伸的方式来铺满整个边框

(3). 必须将元素的边框厚度设置为非0非auto值.

支持:

FF 3.5, Safari 4, Chrome 3

四. text-shadow(文本阴影)

使用:

text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>]

说明:

(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色当<模糊半径>未指定时, 半径值为0

(2) shadow可以是逗号分隔的列表, 如:

text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd

(3) 阴影效果会按照shadow list中指定的顺序应用到元素上

(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身

(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.

支持:

FF 3.5, Opera 10, Safari 4, Chrome 3

五. text-overflow(文本截断)

使用:

text-overflow: inherit | ellipsis | clip

-o-text-overflow: inherit | ellipsis | clip

说明:

(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.

支持:

IE6+, Safari4, Chrome3, Opera10

六. word-wrap(自动换行)

使用:

word-wrap: normal | break-word

支持:

IE6+, FF 3.5, Safari 4, Chrome 3

七. border-radius(圆角边框)

使用:

-moz-border-radius: 5px

-webkit-border-radius: 5px

支持:

FF 3+, Safari 4 , Chrome 3

八. opacity(不透明度)

使用:

opacity: 0.5

filter: alpha(opacity=50)/* for IE6, 7 */

-ms-filter(opacity=50)/* for IE8 */

支持:

all

九. box-sizing(控制盒模型的组成模式)

使用:

box-sizing: content-box | border-box// for opera

-moz-box-sizing: content-box | border-box

-webkit-box-sizing: content-box | border-box

说明:

1. content-box:

使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border

2. border-box:

使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度

也不会变).

支持:

FF3+, Opera 10, Safari 4, Chrome 3

十. resize(元素缩放)

使用:

resize: none | both | horizontal | vertical

说明:

1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效)

2. 属性值说明:

(1). none -->禁用缩放

(2). both -->可同时缩放宽度和高度

(3). horizontal -->仅能缩放宽度

(4). vertical -->仅能缩放高度

支持:

safari 4, chrome 3

十一. outline(外边框)

使用:

outline: 边框厚度 边框样式 边框颜色

outline-offset: 偏移值

说明:

outline-offset需要独立写, 简写是无效的.

支持:

FF3+, safari 4, chrome 3, opera 10

十二. background-size(指定背景图片的尺寸)

使用:

-o-background-size: [length | percentage] {1, 2}

-webkit-background-size: [length | percentage] {1, 2}

例如:

-o-background-size: 50px 60px

-webkit-background-size: 50px 60px

这会将背景图片的宽设置了50px, 高60px.

支持:

safari 4, chrome 3, opera 10

十三. background-origin(指定背景图片从哪里开始显示)

使用:

-webkit-background-origin: border | padding | content

-moz-background-origin: border | padding | content

说明:

(1) border -->从border区域开始显示背景

(2) padding -->从padding区域开始显示背景

(3) content -->从content区域开始显示背景

注意:

1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,

会无效.

支持:

safari 4, chrome 3, FF 3+

十四. background-clip(指定背景图片从什么位置开始裁切)

使用:

-webkit-background-origin: border-box | padding-box | content-box | no-clip

说明:

(1) border-box -->从border区域向外裁剪背景

(2) padding-box -->从padding区域向外裁剪背景

(3) content-box -->从content区域向外裁剪背景

(4) no-clip