CSS3新增选择器及新增属性

CSS常见选择器：
通配符选择器,*
元素选择器：div
类选择器，.class
ID选择器，#id
后代选择器

CSS伪类
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 (点击下去的瞬间)*/
a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
a:active 必须位于 a:hover 之后，这样才能生效！

input：focus （background:yellow）

input:focus
{
background-color:yellow;
}

First name: <input type="text" name="fname" /><br />

:lang（向带有指定 lang 属性的元素添加样式）

q:lang(no)
{
quotes: "~" "~"
}
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

效果：一些文本 _{段落中的引用} 一些文本。
CSS2伪类：
p:first-child 第一个P元素
p > i:first-child 所有

元素中的第一个 元素
p:first-child i 第一个子元素的

元素中的所有 元素

CSS伪元素：
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

CSS3新增基本选择器有：
子元素选择器: 父元素 > 子元素 (father > children ) 兼容性：IE8+，FireFox，Chrome，Safari，Opera
相邻兄弟选择器: 元素+兄弟相邻元素 (Element + Sibling) (IE8+ , FireFox，Chrome，Safari，Opera)
通用兄弟选择器，:元素~后面的所有兄弟元素 (Element~Siblings) 兼容性：IE8+，FireFox，Chrome，Safari，Opera
群组选择器:元素1，元素2，……，元素N (Element1,Element2,……,Elementn)
兼容性：IE6+，FireFox，Chrome，Safari，Opera

CSS3新增伪类

• p:first-of-type选择属于其父元素的首个元素的每个元素
• p:last-of-type选择属于其父元素的最后元素的每个元素
• p:only-of-type选择属于其父元素唯一的元素的每个元素
• p:only-child选择属于其父元素的唯一子元素的每个元素
• p:nth-child(2)选择属于其父元素的第二个子元素的每个元素
• :before在元素之前添加内容,也可以用来做清除浮动
• :after在元素之后添加内容
• :enabled :disabled控制表单控件的禁用状态
• :checked单选框或复选框被选中

1、属性选择器：

概念：为带有attribute属性的Element元素设置样式
语法：Element[attribute]

概念：为attribute=”value” 属性的Element元素设置样式
语法：Element[attribute=”value”]

概念：选择attribute属性包含“value “的元素，并设置其样式
语法：Element[attribute~=”value”]

注意：当div[title~=f]时，


两个img标签中只有第二个会被选中，因此这个选择器不是模糊查询

概念：设置attribute属性值以“value”开头的所有Element元素的样式
语法：Element[attribute^=”value”]

概念：设置attribute属性值以“value”结尾的所有Element元素的样式
语法：Element[attribute$=”value”]
兼容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：设置attribute属性**值包含“value”*的所有Element元素的样式
语法：Element[attribute=”value”]
兼容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：选择attribute属性值为“value”或以“value-”开头的元素，并设置其样式
语法：Element[attribute|=”value”]
兼容性：IE8+ , FireFox，Chrome，Safari，Opera
注意：这个选择器不是模糊查询

2、结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/匹配奇数行/

p:nth-child(even){background:red}/匹配偶数行/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个子节点

E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

3、伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E

E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时

E::before 生成内容在E元素前

E::after 生成内容在E元素后

Content 属性

E:not(s) 表示E元素不被匹配

E~F表示E元素毗邻的F元素