《
分析最常用30个css选择器》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233XR013.htm
::伪类用于给元素片断增加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪类只能用于块状元素。
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代码
21. X::pseudoElement
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
咱们也常常用它来实现肃清浮动，写法如下：
a[data-filetype="image"] { color: red; }
这样所有链接到图片的链接字体颜色为红色。
29. X:only-of-type
p::first-line { font-weight: bold; font-size: 1.2em; }
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
div p:only-child { color: red; }
这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
23. X:nth-last-child(n)
li:only-of-type { font-weight: bold; }
这个伪类匹配的是，在它上级容器下只有它一个子元素，它不街坊元素。例如上面代码匹配仅有一个列表项的列表元素。
15. X[foo~="bar"]
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。
在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现，须要这样做：
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
ul:nth-last-of-type(3) { border: 1px solid black; }
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下：
（IE6居然支撑，有些意外啊。）
13. X[href^="http"]
这两个伪类与content联合用于在元素的前面或者后面追加内容，看一个简略的例子：
:first-of-type伪类与:nth-of-type(1)后果相同，匹配出现的第一个元素。我们来看个例子：
另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会取得更快的速度。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
input[type=radio]:checked { border: 1px solid black; }
上面代码中匹配的是所有处于选定状况的单选radio，设置1px的玄色边框。
li:nth-child(3) { color: red; }
这个伪类用于设定一个序列元素（好比li、tr）中的第n个元素（从1开端算起）的样式。在上面例子中，设定第三个列表元素li的字体色彩为红色。
tr:nth-child(2n) { background-color: gray; }
兼容浏览器：IE9+、Firefox、Chrome、Safari
下面的代码设定了段落中第一个字母的样式：
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
li:nth-last-child(2) { color: red; }
与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
30. X:first-of-type
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
a:hover { border-bottom: 1px solid black; }
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>
在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。
这个功效很好，然而多少又有些局限。假如我们盼望匹配href包括css9.net的所有链接该怎么做呢,分析如何在百度知道发外链的技巧？看下一个选择器。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
14. X[data-*="foo"]
方案一：
html代码
--> [
网站建设之]剖析最常用30个css选择器
ul:nth-of-type(3) { border: 1px solid black; }
与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
p + ul li:last-child { font-weight: bold; }
方案三：
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
html代码
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
属性选择器。上面代码匹配的是href中所有以http开头的链接。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
28. X:only-child
17. X:checked
20. X:not(selector)
需要注意的是,分析各类有创意的导航方式，在ie 6中，:hover只能用于链接元素。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
.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划过时的背风景。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
22. X:nth-child(n)
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
看上去比拟麻烦。另一个解决措施是为所有的图片链接加一个特定的属性，例如‘data-file’
你兴许已经把握了id、class、后盾选择器这些基础的css选择器。但这远远不是css的全体。下面向大家体系的解析css中30个最常用的选择器，包含我们最头痛的浏览器兼容性问题。控制了它们，才干真正领略css的宏大灵巧性。
26. X:first-child
如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时必定要注意它是否兼容。不外，这不应成为禁止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手腕让老版本的浏览器也支持它们。
24. X:nth-of-type(n)
这里分享一个教训，在设定链接划过期呈现下滑线时,分析动态网站和静态网站的区别，使用border-bottom会比text-decoration显得更美丽些。代码如下：
总结：
div:not(#container) { color: blue; }
否认伪类选择器用来在匹配元素时消除某些元素。在上面的例子中，设定除了id为container的div元素字体颜色为blue。
原文：
<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列表项该如何做呢：
a[href=" { color: #1f6053; }
属性选择器。 上面的代码匹配所有领有href属性，且href为
ul:nth-last-of-type(3) { border: 1px solid black; }
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在h1题目的后面显示一张图片。
1. *
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
计划二：
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值顶用空格分隔的多个值中的一个。看下面例子：
* { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用,分析一下你的博客为什么不受欢迎？。web设计者时常用它将页面中所有元素的margin跟padding设置为0。 *选择符也能够在子选择器中使用。
#container * { border: 1px solid black; } 上面的代码中会利用于id为container元素的所有子元素中。 除非必要，我不倡议在页面中过的的使用星状选择符,分析web默认字体的最佳选择，由于他的作用域太大，相称耗浏览器资源。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 2. #X
#container { width: 960px; margin: auto; } 井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的上风是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样毛病也很显明优先级过高，重用性差，所以在使用id选择器前，我们最好问下本人，真的到了非用id选择器的田地？ 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 3. .X
.error { color: red; } 这是一个class(类)选择器。class挑选器与id选择器的不同是class取舍器能作用于冀望款式化的一组元素。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 4. X Y
li a { text-decoration: none; } 这也是我们最常用的一种选择器——后世选择器。用于选取X元素下子元素Y，要留心的点是，这种方法的选择器将选取其下所有匹配的子元素，疏忽层级，所以有的情形是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不愿望ul下的li的a去掉下划线。使用尔后代选择器的时候要斟酌是否生机某样式对所有子孙元素都起作用。这种昆裔选择器还有个作用，就是创立类似命名空间的作用。比如上述代码样式的作用域显著为li。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 5. X
a { color: red; } ul { margin-left: 0; } 标签选择器。使用标签选择器作用于作用域范畴内的所有对应标签。优先级仅仅比*高。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 6. X:visited和X:link
a:link { color: red; } a:visted { color: purple; } 应用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 7. X+Y
ul + p { color: red; } 相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素) 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 8. X>Y
div#container > ul { border: 1px solid black; } <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> 子选择器。与后辈选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从实践上来讲X > Y是值得倡导选择器，惋惜IE6不支持。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 9. X ~ Y
ul ~ p { color: red; } 相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X雷同级别的所有Y元素，而X+Y只匹配第一个。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 10. X[title]
a[title] { color: green; }
属性抉择器。比方上述代码匹配的是带有title属性的链接元素。
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px,分析IE中应用CSS的一些BUG; }
属性选择器。在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩大名为.jpg图片的链接。（留神，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）
Tag：css选择器 css选择器
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
下面的代码中设定了段落中第一行的样式：
ul >,分析CSS网页布局中易犯的10个错误; li:last-child { border-bottom:none; }
与:first-child相似，它匹配的是序列中的最后一个元素。
看一个更机动的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：
兼容阅读器：IE9+、Firefox、Chrome、Safari
与X:nth-of-type(n)功能类似，不同的是它从元素最后一次涌现开始算起。上面例子中设定倒数第三个无序列表的边框
12. X[title*="css9.net"]
25. X:nth-last-of-type(n)
13. X[href$=".jpg"]
a[href*="css9.net",分析CSS2选择器对浏览器的支持情况;] { color: #1f6053; }
属性选择器。正如我们想要的，上面代码匹配的是href中包含"css9.net"的所有链接。
:first-child伪类用于匹配一个序列的第一个元素。我们常常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：
(责任编辑：网站建设)
分析最常用30个css选择器相关文章