这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。
笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS2和CSS3的所有规定。
=====================
CSS选择器笔记
阮一峰整理
一、基本选择器
实例：
*{margin:0;padding:0;}
p{font-size:2em;}
.info{background:#ff0;}
p.info{background:#ff0;}
p.info.error{color:#900;font-weight:bold;}
#info{background:#ff0;}
p#info{background:#ff0;}
二、多元素的组合选择器
divp{color:#f00;}
#navli{display:inline;}
#nava{font-weight:bold;}
div>strong{color:#f00;}
p+p{color:#f00;}
三、CSS2.1属性选择器
p[title]{color:#f00;}
div[class=error]{color:#f00;}
td[headers~=col1]{color:#f00;}
p[lang|=en]{color:#f00;}
blockquote[class=quote][cite]{color:#f00;}
四、CSS2.1中的伪类
p:first-child{font-style:italic;}
input[type=text]:focus{color:#000;background:#ffe;}
input[type=text]:focus:hover{background:#fff;}
q:lang(sv){quotes:"\201D""\201D""\2019""\2019";}
五、CSS2.1中的伪元素
p:first-line{font-weight:bold;color;#600;}
.preamble:first-letter{font-size:1.5em;font-weight:bold;}
.cbb:before{content:"";display:block;height:17px;width:18px;background:url(top.png)no-repeat00;margin:000-18px;}
六、CSS3的同级元素通用选择器
p~ul{background:#ff0;}
七、CSS3属性选择器
div[id^="nav"]{background:#ff0;}
八、CSS3中与用户界面有关的伪类
input[type="text"]:disabled{background:#ddd;}
九、CSS3中的结构性伪类
p:nth-child(3){color:#f00;}
p:nth-child(odd){color:#f00;}
p:nth-child(even){color:#f00;}
p:nth-child(3n+0){color:#f00;}
p:nth-child(3n){color:#f00;}
tr:nth-child(2n+11){background:#ff0;}
tr:nth-last-child(2){background:#ff0;}
p:last-child{background:#ff0;}
p:only-child{background:#ff0;}
p:empty{background:#ff0;}
十、CSS3的反选伪类
:not(p){border:1pxsolid#ccc;}
十一、CSS3中的:target伪类
（完）
Nicky说：
风海迷沙说：
曲高和寡。话说jQuery又有新版本了，暂时不跟新了。
小为说：
写得很好啊。都总结出来了！！顶！
dowlare说：
对学习CSS非常有帮助，而且最近准备学jquery，收藏学习：）
Xhacker说：
OOLI说：
虽然许多选择器没用到过，不过的确开阔了视野啊
123说：
阮一峰真牛啊，很多google搜索第一个词条就是这里。包括很多linux的东西。搜到的不是linux论坛，而是这里。
sygougou说：
非常厉害，总结时思路很清晰，初学者查阅非常清楚。
wangofjian说：
avajayam说：
“E:first-child匹配父元素的第一个子元素”，确切应该是匹配父元素的第一个带E标签的子元素
ypchen说：
如何控制有特定子元素的父元素呢？
比如说后面有了我想改的样式又不去给它添加新的类怎么办到呢？
zhenyong说：
引用：E+F毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
更准确的说法是：
E+F毗邻元素选择器，匹配所有紧随E元素之后的第一个同级元素F
violet说：
css3的选择器多好用吖。可惜IE不支持。
crazy说：
为什么没有组合选择器
zhangym说：
8.E+F毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
个人觉得应该是匹配紧跟e元素后的第一个统计元素f
呵呵愿意和大牛一起提高
fanghao说：
整理的很全面,很有条理,谢谢了,下载下来备用!
另外,我总是遇到两个冒号的选择器(::),不知道这是什么选择器,或者是不是选择器呢
levin说：
“E:first-child匹配父元素的第一个子元素”应该是E标签里的第一个元素吧
JakWings说：
「E,F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔。」上面这个说明是错的，逗号是用来分隔选择器的，并不能用来同时选择多个元素的，不信的话试试像这样的语句就知道了：div,p.test。这并不是选择所有class为test的div和p元素，而是选择所有class为test的p元素，和所有div元素。
RenfeiSogn说：
纠正一个bug，31-E::selection，这个是伪元素，不是伪类~~
Jimmy.Lee说：
Brant说：
阮大师是对的。E+F匹配的是一组，而不是一个。比如li+li会匹配文档中所有的列表项，除了每个列表的第一个
六翼说：
引用JakWings的发言：「E,F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔。」上面这个说明是错的，逗号是用来分隔选择器的，并不能用来同时选择多个元素的，不信的话试试像这样的语句就知道了：div,p.test。这并不是选择所有class为test的div和p元素，而是选择所有class为test的p元素，和所有div元素。
其实我想问的是，这样能连在一起写的，除了“.”和“#”这两种之外还有别的吗？如果没有，如何匹配多种规则的“and”呢……
好吧我傻了，还是连在一起写就行……就像这样：$("[data-role=popup][name=received_at_dateview]")
dacheng说：
::selection是伪元素不是伪类
显示不全说：
手机上显示不完整。虽然这是自动匹配了m版，但表格只显示大半，且不能右拖也不能缩小。环境安卓。
斜阳幽草说：
:[]是什么选择器啊，面试的时候问的
Chao说：
cheacked应为checked
吃土的小此方说：
关于说：
哈哈哈，快10年了。
TenWindSf说：
引用斜阳幽草的发言：:[]是什么选择器啊，面试的时候问的
属性选择器
盖学强说：
你好我想请问一下如何选择子元素都为p的div
edwards1990说：
引用盖学强的发言：你好我想请问一下如何选择子元素都为p的div
田说：
看到很多地方伪元素使用双冒号。不过看了下作者引用的出处是用的单冒号，我自己试了下在编译器中会报警，但是仍能正常渲染；