CSS常见选择器总结

   css选择器种类繁多，笔者在此对常见的选择器做了一个简单的汇总作为复习也供大家参考，汇总不会包含所有的但也包含了常见的。主要介绍有基础的元素选择器，以及关系选择器、伪类选择器、属性选择器等等。

---

基础选择器

  基础选择器主要包括有类选择器，标签选择器，id选择器，通配符选择器。

  1. 类选择器  语法  E.myclass { }，是以标签包含的类名为区分来进行选择的选择器，类选择器可以同时定义多个。

  2. 标签选择器 语法 E { }，是以标签为区分来进行选择的选择器，这个就不多赘述。要强调的就是，我们通常不建议使用无具体语义定义的标签选择器 如 div span。

  3. 通配符选择器，语法 * { }，我们通常不建议使用通配符选择器，因为它会遍历文档中的所有元素。

  4. id选择器，语法 E#myid { }，这是以唯一标识符id属性等于myid的E对象作为选择器，由于id往往是结合js来运用，我们一般尽量少用 ID 选择器。

  以上就是四种基础选择器，也可以称为元素选择器。

复合选择器

关系选择器，顾名思义是根据元素之间的关系来进行选择的选择器。

1. 后代选择器 语法 E F {}，父级 子级{}， 选择所有被E元素包含的F元素，与子选择器不同的是，它会选中所有符合条件的后代，包括了儿子，孙子，重孙子～～，即所有后代中的F元素。

2. 子选择器 语法 E>F {}，与后代选择器不同的是，子选择器只能选中子元素，不能够选择孙子及更多后代。

3. 交集选择器 语法 E.F {}，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special

4. 并集选择器 语法 E, F, #myid, .myclass，此选择器和可以和其它选择器一同使用，主要可以用来缩减代码量， 如： .one, p , #test {color: #F00;}  

5. 相邻选择器 语法 E+F {}， 选择紧贴在E元素之后的F元素，与兄弟选择器不同的是，相邻选择器是能选中符合条件的相邻的兄弟元素

6. 兄弟选择器 语法 E~F {}，选择E元素后面的所有兄弟元素F。与相邻选择器不同的是，兄弟选择器会选中所有符合条件的兄弟元素，而不限于紧邻的元素。

属性选择器

1. E[att] {}，选择具有att属性的E元素

2. E[att="val"] {}，选择具有att属性且属性值等于val的E元素。

3. E[att~="val"] {}，选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。如 div[class～"a"] 就可以选中 <div class = "a b">，a与b之间有空格

4. E[att^="val"] {}， 选择具有att属性且属性值为以val开头的字符串的E元素。如 div[class^"a"] 就可以选中 <div class = "abc">

5. E[att$="val"] {}，选择具有att属性且属性值为以val结束的字符串的E元素。如 div[class$"a"] 就可以选中 <div class = "bca">

6. E[att*="val"] {}，选择具有att属性且属性值包含val的字符串的E元素。如 div[class*"a"] 就可以选中 <div class = "bca"><div class = "aba"><div class = "bac"> 这个三个div都会被选中，因为都包含了a

7. E[att|="val"] {}, 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择.如 div[class|"a"] 会选中 <div class = "a-testdsfsd">和 <div class = "a">

伪类选择器

 伪类选择器包括了链接伪类选择器，结构伪类选择器等。伪类选择器种类繁多这里就简单写一下。

 链接伪类选择器主要有 a:link /* 未访问的链接 */   a:visited /* 已访问的链接 */  a:hover /* 鼠标移动到链接上 */  a:active /* 选定的链接 */。

结构伪类选择器主要有 E:first-child 匹配父元素的第一个子元素E，E:last-child 匹配父元素的最后一个子元素E，E:only-child  匹配父元素仅有的一个子元素E，E:nth-child(n) 匹配父元素的第n个子元素E，若第n个子元素不为E则选空

 E:first-of-type {}, 匹配同类型中的第一个同级兄弟元素E。E:last-of-type {}, 匹配同类型中的最后一个同级兄弟元素E。E:only-of-type {}, 匹配同类型中的唯一的一个同级兄弟元素E。E:nth-of-type(n) {}, 匹配同类型中的第n个同级兄弟元素E。这四个与上面四个的最大区别在于是否计算不为E的子元素，E：nth-of-type(n) 找到的是父元素下的第n个E元素，E:nth-child(n) 找到的是父元素下的第n个元素并且该元素要为E元素才能够被选中，若不是E元素的空选。其它六个同理。值得一说的是n除了具体的数值外，还可以是even，odd来进行奇偶选择，也可以是n+1或者是n-5等n和数值的组合，n是从0开始，通过组合可以达到选择前多少个或者从多少个开始的效果。

 

结构选择器还有像 E:empty{}, E:checked{}, E:disabled{},E:focus{},E:target{},E:enabled{}，大家感兴趣的可以自己再去了解一下。