CSS选择器

选择器是制作网页效果非常重要的一部分，学会对选择器的使用，对网页效果图的控制至关重要。

下面主要罗列的几个选择器：

=====================

1、基本选择器	作用
`*`	通用选择器，匹配所有元素
`tagName`	元素（标签）选择器，对应标签名为tagName的标签进行样式设置
`.className`	类选择器，对应类名为className的部分
`#IDname`	ID选择器，对应ID名为IDname的部分

选择器书写和样例可以参考： CSS选择器 - MDN

2、组合选择器	作用
`tagname1，tagname2`	多元素选择器，同时匹配所有tagname1或2，两个（或多个）之间用逗号分隔
`T1 T2`	后代元素选择器，匹配所有属于T1元素后代的F元素，T1\T2之间用空格分隔
`T1>T2`	子元素选择器，匹配所有T1元素的直接子元素T2
`T1+T2`	直接相邻选择器，匹配紧随T1元素之后的同级元素T2（仅选中一个）
`E~F`	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
`.class1.class2`	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素。这样子仅选中一个元素

空格与大于号的区别需要注意，且可以通过>这种组合方法来使得匹配更加严格。

直接相邻选择器仅选中一个同类元素，而普通相邻选择器选中不止一个元素且不需要直接（紧密）相邻。

3、属性选择器	作用
E[attr]	匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value]	匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value]	匹配属性attr的值以value开头的元素
E[attr $= value]	匹配属性attr的值以value结尾的元素
E[attr *= value]	匹配属性attr的值包含value的元素

注：这部分内容和正则的使用相关

4、伪类选择器	作用
`E:first-child`	匹配父元素的第一个子元素
`E:link`	匹配所有未被点击的链接
`E:visited`	匹配所有已被点击的链接
`E:active`	匹配鼠标已经其上按下、还没有释放的E元素
`E:hover`	匹配鼠标悬停其上的E元素
`E:focus`	匹配获得当前焦点的E元素
`E:nth-child(n)`	匹配E的父元素的第n个子元素，第一个编号为1
`E:last-child`	匹配父元素的最后一个子元素，等同于:nth-last-child(1)

伪类选择器往往表示元素的一个状态，对不同状态进行css设置。除了上述常用的之外，还有E:enabled/disabled 来匹配表单中可用/禁用的元素 ; E:checked匹配表单中被选中的radio或checkbox元素; E::selection 匹配用户当前选中的元素。

关于E:nth-child(n)，注意E元素必须得有父元素，然后它会寻找同类的元素E（类名E或者标签名E相同），若在寻找时第n个位置被不同元素的位置占有则不生效。下图中将.two类移到除第二个以外的位置均生效，但在算第n个时它也是占位的。

E:nth-child(n)

n的取值可以是：

注意两者区别（空格）
div:first-child 选择div父元素下的第一个且是div的子元素
div :first-child 选择div元素下的第一个子元素

div:first-of-type 选择的是父元素下每一类的第一个，例如下例子中被选中的是p[a]&h3[b]



   a
   b
   c

书写顺序：

因为上面四个样式的权重是一样，写在后面的样式会覆盖前面的样式。即触发了后面的事件后若无释放则会一直覆盖前面的样式，说到底还是CSS层叠性的问题：

若无任何操作，则显示a:link
若已经访问，则a:visited会覆盖a:link，所以a:visited在a:link之后（若把a:visited放在最后，则触发过visited之后前面的样式就会被覆盖了无法再次触发）
无论是否访问，鼠标经过时 a:hover需要生效，所以写在a:link和a:visited后
当点击时则只会显示 a:active，所以写在最后

可以两个冒号也可以一个冒号，老IE对两个冒号不兼容，但两个冒号是CSS3的新写法，更加规范。

注意对于伪元素选择器，必须加content属性，如下例，则content中的内容会加入到main内部，作为第一个子元素，内容是necessary

.main::before {
content: "necessary"; }

部分参考： CSS选择器笔记 - 阮一峰

=====================

选择器的使用经验