css选择符

前言

类选择符允许以一种独立于文档元素的方式来指定样式，该选择符可以单独使用，也可以与其他元素结合使用。像id、class、标签等选择符我们平时都很常用，可是css选择符有好多种，许多选择符我们不常用的话，就会忽略它。

css选择符参考图

元素选择符

通用选择符 *

通用选择符*****会选中页面中所有的元素。可以发现许多网页用来重置浏览符样式

* {margin:0;padding:0;}

#container * {
 border: 1px solid black;
}

ID选择符(#)

在选择符中使用“#”可以用id来定位某个元素。在使用的时候得注意的是ID选择符
一个文档里不能重复使用

1	#content {width:1000px;margin:0 auto;}

.class类选择符

class类选择符和id选择符的不同是，它可以无限复用，当页面中有很多元素需要用到相同的样式属性时，你可以通过.class来定义。

1	.old{color:#565656;}

标签选择符

使用标签选择符作用于作用域范围内的所有对应标签。优先级仅仅比*高。

1 2	a {color:red;text-decoration:none;} ul {padding:0;}

关系选择符

后代选择符

当你需要更精确地定位时，可以使用后代选择符。例如，假如说你只想选择无序列表里的链接，而不是所有的链接？这种情况下你就应该使用后代选择符。

1	li a {text-decoration: none;}

子选择符

有些时候后代选择器的功能过于强大，与我们想要的结果相比他匹配的更多。有时我们只需要选择父元素的直接子元素而不是一个祖先元素内部嵌套的所有元素。这时候子选择器闪亮登场，可以使用＞代替空白符号来放在父元素与子元素之间，就可以创建一个子选择器。

1	article > p {font-size:16px;}

相邻选择符

选择第一个元素后紧跟的元素,两者拥有相同的父元素

1	h2 + p {color:red;}

兄弟选择符

选择第一个元素后的兄弟元素,两者拥有相同的父元素

1	h2 ~ p{color:#f00;}

属性选择符

E[att]

选择具有att属性的E元素。

1	a[title]{color: green;}

E[att=”val”]

选择具有att属性且属性值等于val的E元素。

1	input[type="text"]{border: 2px solid #000;}

E[att~=”val”]

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

1	div[class~="col"]{border: 2px solid #000;}

E[att^=”val”]

选择具有att属性且属性值为以val开头的字符串的E元素。

1	div[class^="abc"] {border: 2px solid #000;}

E[att$=”val”]

选择具有att属性且属性值为以val结尾的字符串的E元素。

1	div[class$="ccc"] {border: 2px solid #000;}

E[att*=”val”]

选择具有att属性且属性值为包含val的字符串的E元素。

1	div[class*="bb"] {border: 2px solid #000;}

E[att|=”val”]

选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。

1
2
3

div[class|="a"] {border: 2px solid #000;}

<div class="a-test">1</div>

伪类选择符

E:link

指示未访问过的链接的样式

1	a:link {color:red;}

E:visited

设置超链接a在其链接地址已被访问过时的样式。

1	a:visited{color: #f00;}

E:hover

设置元素在其鼠标悬停时的样式。

1 2	a:hover{background:red;color:#f00;} div:hover{background: #ddd;color:#f00;}

E:active

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

1 2	a:active, div:active {background:#ddd;color:#f00;}

E:focus

设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。

1	input:focus {background: #f6f6f6;color: #f60;border: 1px solid #f60;outline: none;}

E:lang(fr)

匹配使用特殊语言的E元素。

1 2	p:lang(zh-cmn-Hans) {color: #f00;} p:lang(en) {color: #090;}

E:not(s)

匹配不含有s选择符的元素E。

1	.demo li:not(:last-child) {border-bottom: 1px solid #ddd;}

E:root

匹配E元素在文档的根元素。

1	.test{color:black; color: yellow\0; *color: blue; _color: red;} html:root .test { color: purple\0; }

E:first-child

匹配父元素的第一个子元素E。

1	p:first-child{color:#f00;}

E:last-child

匹配父元素的最后一个子元素E。

1	p:last-child{color:#f00;}

E:only-child

匹配父元素仅有的一个子元素E。

li:only-child {color: #f00;}

<ul>
    <li>伪类选择符 E:only-child</li>
</ul>

<ul>
	<li>伪类选择符 E:only-child</li>
	<li>伪类选择符 E:only-child</li>
	<li>伪类选择符 E:only-child</li>
</ul>

E:nth-child(n)

匹配父元素的第n个子元素E。

li:nth-child(2n){color:#f00;} // 偶数
li:nth-child(2n+1){color:#000;} //奇数

li:nth-child(even){color:#f00;}// 偶数
li:nth-child(odd){color:#000;} //奇数

因为(n)代表一个乘法因子，可以是0, 1, 2, 3, …, 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

E:nth-last-child(n)

匹配父元素的倒数第n个子元素E,要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

1	p:nth-last-child(2){color:#f00;}

E:first-of-type

匹配同类型中的第一个同级兄弟元素E。

1	p:first-of-type{color:#f00;}

E:last-of-type

匹配同类型中的最后一个同级兄弟元素E。

1	p:last-of-type{color:#f00;}

E:only-of-type

匹配同类型中的唯一的一个同级兄弟元素E。

1	p:only-of-type{color: #f00;}

E:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E。

1	span:nth-of-type(1){color:#f00;}

E:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素E。

1	p:nth-last-of-type(1) {color: #f00;}

E:empty

匹配没有任何子元素（包括text节点）的元素E。

1	p:empty {height:25px;border: 1px solid #ddd;background:#eee;}

E:checked

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

1 2	input:checked + span {background: #f00;} input:checked + span:after {content: " 我被选中了";}

E:enabled

匹配用户界面上处于可用状态的元素E。

1 2	input[type="text"]:enabled {border: 1px solid #090;background: #fff;color: #000;} input[type="text"]:disabled {border: 1px solid #ccc;background: #eee;color: #ccc;}

E:disabled

匹配用户界面上处于禁用状态的元素E。

1 2	input[type="text"]:enabled {border: 1px solid #090;background: #fff;color: #000;} input[type="text"]:disabled {border: 1px solid #ccc;background: #eee;color: #ccc;}

E:target

匹配相关URL指向的E元素。

1	#demo:target{color:#f00;}

@page:first

设置在打印时页面容器第一页使用的样式。仅用于@page规则。该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性

1	@page:first{margin:100px 200px;}

@page:left

设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则。该伪类选择符只允许定义margin, padding, border 和 background属性

1	@page :left {margin-left: 300px;}

@page:right

设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则。该伪类选择符只允许定义margin, padding, border 和 background属性

1	@page:right{margin-right:300px;}

伪对象选择符

E:first-letter/E::first-letter

设置对象内的第一个字符的样式。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

1 2	p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}

E:first-line/E::first-line

设置对象内的第一行的样式。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。

1 2	p:first-line {color:#090;} p::first-line {color:#090;}

E:before/E::before

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

1
2

p:before{position:absolute;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器只支持E:before";font-size:14px;}
p::before{position:absolute;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器支持E:before和E::before";font-size:14px;}

E:after/E::after

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

1
2

p:after{position:absolute;left:0;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器只支持E:after";font-size:14px;}
p::after{position:absolute;left:0;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器支持E:after和E::after";font-size:14px;}

E::placeholder

设置对象文字占位符的样式。

<input type="text" placeholder="占位符" />
input::-webkit-input-placeholder { color:#999; }
input:-ms-input-placeholder { // IE10+ color:#9999; }
input:-moz-placeholder { // Firefox4-18 color:#999; }
input::-moz-placeholder { // Firefox19+ color:#999; }

E::selection

设置对象被选择时的样式。
需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

1 2	p::-moz-selection{background:#000;color:#f00;} p::selection{background:#000;color:#f00;}

css选择符的分类

其实看了那么多选择符，其实有点晕，还是有点多，看一遍，复习一遍，分分类，有元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符，目前基本就这5种了。下边在看看这张表理理思路：

选择符浏览器兼容

这么多选择符，有的都毁在浏览器兼容性的手里了，这是从前端观察找的一些兼容数据，但是基本够用了，下边看图：

css1兼容

css2兼容

css3兼容

引自前端观察

基本问题

:hover 在IE6中只有a元素可用。
E:empty 貌似在webkit核心浏览器中有些小bug。
如果这个bug依然存在，不太确定如何测试。
IE6不支持.class1{}.class2{}双类选择器。

IE8注意事项：

E[attr]选择器在值为空的时候或者写错的时候，将不会生效；
IE8支持CSS2.1的所有属性，支持伪类，但是不支持伪元素。

IE8中的IE7兼容模式

E[attr] 和IE8一样，值为空或写错的时候，无效；
E[attr~=val]这里唯一需要注意的是，属性的值，区分大小写；
E[attr|=val]IE7有一些大小写敏感的问题，但是通常可以正常使用；
:first-child IE7 会将一个注释或者文字节点当成first-child，而不是只有元素才是“子”元素。所以，如果在第一个子元素前有注释或文字，IE7会匹配之而不是去匹配第一个子元素。

Safari/Chrome

Safari3.2(事实上可以追溯到3.1)以上的版本已经完全的支持所有CSS选择器了。
Safari3.0基本上对CSS 2的选择器支持很好，但不支持CSS3大部分新增的选择器，而且对属性选择器的支持不是很完整。
iPhone中的Safari有3.0和3.2两个版本，对CSS的支持情况与PC/Mac版的支持情况一致。
Android系统自带的浏览器基本上也是基于webkit核心的，其对于CSS选择器的支持情况待测。

CSS兼容性和Internet Explorer

好多人都死在了IE手里，或者说会产生疑惑，而第三方资料，难免会有误差，IE版本比较低，我们还得处理，所以这里有个网站可以查查，它可以查到css选择符对IE5的支出程度：

链接地址：CSS兼容性和Internet Explorer

前言