概述

选择器是用来快速便捷的查找某一元素的，一个html文档中这么多元素，属性，如果只使用获得某一元素然后遍历再获得子元素的方法那时不可想象的，可能随便查找一个元素都需要几十行代码。

而选择器就是为了简化查找操作的。他将几种常用的标签作为选择的key，只需要知道这些标签内部就会有一套算法帮助我们快速查找，并且还可以几个key连在一起查找。

选择器种类

*(清空) #(ID) .(类）

*（清空选择器)

这个选择器会选择所有元素，常被用作清空margin和padding

*{
    margin: 0;
    padding: 0;
}

#(ID选择器)

它会选择所有匹配的ID

例如

<div id="gac_scont"></div>

css
#gac_scont{
   border: 1px solid black;
}

.(类选择器)

类选择器会选择对应的类，例如

<div class="DH7hPe"></div>

css
.DH7hPe
{
    color: red;
}

X(类型),X[…](属性), x:…(伪类)

X是直接选择某种元素。例如a, img等。

a{color: red;}
ul { margin-left: 0;}

X[attibute]是选择该元素的某些属性，则对这个元素进行某些动作，例如：

a[title]//存在title属性
{
    color: green;
}

a[href="http://strongme.cn" rel="external nofollow"]
{
    color: #1f6053;
}
//如果链接时对应的链接则把链接中的文本设置成绿色

对于这些属性还可以使用类似正则表达式的形式。例如：

a[href^="https"]//以https开头
a[href$=".jpg"]//链接以jpg结尾
a[href*="strongme"]//只要存在strongme的链接都可以通过，例如strongme.com,strongme.top

a[headers~= col1]//匹配属性有多个由空格分隔的值 选择其中一个
例如： 	
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
a[data-info~="external"]{ color: red;}

伪类选择器

选择器 说明 举例
:first-child 匹配父元素的第一个子元素 p:first-child
:link 未被点击的链接 a:link
:visited 已经被点击的链接 a:visited
:active 按下但未被释放的元素 a:active
:hover 鼠标悬浮在其上
X:focus 当前获得焦点的X元素
lang(C) lang属性是C的元素 q:lang(sv)
:first-line 匹配元素的第一行 p:first-line
:first-letter 匹配元素的第一个字母 p:first-letter
:before 在元素生成之前插入的内容 p:before{ content:”台词：”;}
:after 在元素生成之后插入的内容
:enable 匹配表单中激活的元素
:disable 匹配禁用的元素 input[type="text"]:disabled { background:#ddd; }
:checked 选择表单中被选中的单选框或复选框
:selection 匹配当前选中的元素
:root 根元素
:nth-child(n) 第n个子元素
:nth-last-child(n) 倒数第n个子元素
:first-of-type 和该元素同种类的第一个子元素
:empty 匹配不包含任何子元素的元素 p:empty

组合选择器

  • X,Y(多元素选择器）： 匹配X或Y
  • X Y： 首先匹配X，在符合X条件的元素中再用Y匹配
  • X>Y: 匹配X，然后匹配在X下的直接后代
  • X+Y: 选择X条件下选中元素中第一个Y元素
<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item2 </li>
      <li> List Item3 </li>
      <li> List Item4 </li>
   </ul>
</div>

div#container ul会选择两个地方的ul
div#container>ul只会选择外层的ul

ul li会选择第一个li即List Item对应的Li

优先级及性能

可能有多个选择器同时选中一个元素，这时候就需要考虑优先级来确定哪一个选择器生效了。一般来说越特殊优先级越高。我们通常使用1表示标签名选择器，10表示类选择器，100表示ID选择器。例如：

div.test1 .span var 优先级 1+10 +10 +1

span#xxx .songs li 优先级1+100 + 10 + 1

#xxx li 优先级 100 + 1

一些建议：

  1. 避免在关键地方使用通用选择器,如.content {color: red;}。这种需要匹配所有元素，开销极大
  2. 避免使用标签或类选择器限制id选择器：
    避免使用

    button#backButton {…}
    避免使用
    .menu-left#newMenuIcon {…}
    推荐使用
    #backButton {…}
    推荐使用
    #newMenuIcon {…}
  3. 不要在类选择器前加标签： 和上面一样，增加了不必要的匹配

    参考

参考1

参考2

参考3