css常见选择器
常见css选择器解析：
（1）通配符（*）选择器：*{margin:0;padding:0;}对页面上的每一个元素起作用，我们经常使用*将页面中每个元素的margin和padding设置为0；它也可以在子选择器中使用：例如，#box *{border:1px solid #ccc;}
（2）ID选择器（#X）：#box{width:100px;height:100px;}页面中的id必须唯一，id选择器是最常用选择器之一，优势为：精准、高优先级（优先级基数为100，而class基数为10），缺点为优先级过高，重用性低；兼容浏览器：IE6.0+、chrome、firefox、safari、opera（3）类选择器（.X）：.box{width:100px;height:100px;}页面中可以有多个相同class；兼容浏览器：IE6.0+、chrome、firefox、safari、opera
（4）标签选择器（X）：div{width:100px;height:100px;}a{display:inline-block;}作用于作用域范围内所有对应标签。优先级仅高于*选择器；兼容浏览器：IE6+、chrome、firefox、safari、opera
（5）后代选择器（X Y）：li a{line-height:30px;};用于选择X元素下的子元素Y，这种选择器将会选取其下所有匹配的子元素，无视层级，所以有的情况不宜使用，比如上述的代码给li下的所有a定义行高30px，但li里面还有个ul，我不希望ul下的li的a的行高也为30px。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。 兼容浏览器：IE6+、Firefox、Safari、Chrome、Opera
（6）子选择器（X>Y）：.box>ul{border:1px solid #ccc;}
<div class="box"> <ul> <li> <ul> <li></li> <li></li> </ul> </li> <li></li> </ul> </div>
子选择器与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用，上述例子中.box>ul仅对.box最近的ul起作用；兼容浏览器：IE7+、Firefox、Safari、Chrome、Opera
（7）伪类选择器（X:visited,X:link）：a:link{}鼠标未点击时的效果；a:visited{}鼠标点击后的效果； 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（8）相邻选择器（X+Y）：ul+p{color:red;}匹配在ul后面的第一个p，将其文字颜色设为红色(只匹配第一个元素)，兼容浏览器：IE7+、Firefox、Safari、Chrome、Opera
（9）相邻选择器（X~Y）：ul~p{color:red;}与X+Y不同的是：X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个；兼容浏览器：IE7+、Firefox、Safari、Chrome、Opera
（10）属性选择器（X[title]）：a[title]{color:green;}匹配的是带有title属性的链接元素。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（11）属性选择器（X[title="foo"]）：
a[href="http://css9.net"] {
color: #1f6053;
}
匹配所有拥有href属性，且href为http://css9.net的所有链接。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（12）属性选择器（X[title*="css9.net"]）：
a[href*="css9.net"] {
color: #1f6053;
}
匹配的是href中包含"css9.net"的所有链接。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（13）属性选择器（X[href^="http"]）：
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
匹配的是href中所有以http开头的链接。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（14）属性选择器（X[href$=".jpg"]）：
在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（15）属性选择器（X[data-*="foo"]）：
为所有的图片链接加一个特定的属性，例如‘data-file’
html代码
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下：
a[data-filetype="image"] {
color: red;
}
这样所有链接到图片的链接字体颜色为红色。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
（16）属性选择器（X[foo~="bar"]）
属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：
html代码
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代码
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}
上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动，写法如下：
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
19. X:hover
div:hover {
background: #e3e3e3;
}
:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。
需要注意的是，在ie 6中，:hover只能用于链接元素。
在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：
a:hover {
border-bottom: 1px solid black;
}
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
20.否定伪类选择器 X:not(selector)
div:not(#container) {
color: blue;
}
用来在匹配元素时排除某些元素。在上面的例子中，设定除了id为container的div元素字体颜色为blue。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式：
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
下面的代码中设定了段落中第一行的样式：
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：
tr:nth-child(2n) {
background-color: gray;
}
兼容浏览器：IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：
ul:nth-last-of-type(3) {
border: 1px solid black;
}
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child {
border-bottom:none;
}
与:first-child类似，它匹配的是序列中的最后一个元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {
color: red;
}
这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
在上面的html代码中，如果我们希望仅匹配List Item 2列表项该如何做呢：
方案一：
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
方案二：
p + ul li:last-child {
font-weight: bold;
}
方案三：
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。
（31）::selection：选择被用户选取的元素部分。
浙公网安备 33010602011771号