Part 2-2 CSS选择器

CSS选择器概况

选择器{
  属性: 值; 
}

• CSS选择器类似于地址，通过选择器的地址作用到标签里.

---

基础选择器

元素选择器

元素名{
    属性:值;
}

• 根据指定的元素, 在当前界面中找到所有的该元素, 然后设置属性.
• 因为选中的是所有的该元素，所以会在相同元素不同属性的时候显示出弱势.
  
  

Id选择器

#id名称{
    属性:值;
}
------------------------
<p id="id名称">......</p>

• 根据指定的id名称找到对应的标签, 然后设置属性.
• 在一个HTML文档中的id是不可以重复的.
• Id的值只能由字母、数字、下划线，并且不能由数字开头.
• Id的值不能是HTML标签的名称.
  
  

类选择器

.类名{
    属性:值;
}
------------------------
<p class="类名 类名">......</p>

• 根据指定的类名称找到对应的元素, 然后设置属性.
• 在一个HTML文档中的class的值是可以重复的.
• 在编写class选择器时一定要在class名称前面加上点.
• Class的值只能由字母、数字、下划线，并且不能由数字开头.
• Class的值不能是HTML标签的名称.
  
  

通配符选择器

*{
    属性:值;
}

• 给当前界面上所有的标签设置属性.

---

关系选择器

后代选择器

选择器1 选择器2{
  属性: 值;
}

• 找到所有选择器1, 然后在选择器1下面去查找选择器2选中的元素， 设置属性.
• 放进选择器1中的所有选择器2都是后代.
• 后代选择器可以通过空格一直延续下去.
  
  

子元素选择器

选择器1 > 选择器2{
    属性: 值;
}

• 先找到所有选择器1， 然后在选择器1中查找所有直接关系的选择器2，设置属性.
• 子元素选择器选中父子关系的元素，不会选中被其他元素嵌套的元素.
• 子元素选择器可以通过 > 符号一直延续下去.
  
  

相邻兄弟选择器

选择器1 + 选择器2{
    属性:值;
}

• 给选择器1后面紧跟的那个选择器2设置属性.
  
  

通用兄弟选择器

选择器1 ~ 选择器2{
    属性:值;
}

• 选中选择器1后面的所有选择器2选中的所有元素，设置属性.

---

伪类选择器

普通伪类选择器

选择器:关键字{
  属性: 值;
}
--------------------------------
<a href="#">内容......</a>

常用伪类关键字	作用
link	a元素在未被访问前的CSS样式
visited	a元素在被访问过后的CSS样式
hover	鼠标停浮在选择器上的CSS样式
active	a元素在被激活时的CSS样式

---

结构性伪类选择器

E:first-child和E:last-child

• first-child和last-child选择器用来定位第一个和最后一个特定的子元素【每个结构会重新计算】.
• 例如以下代码，会选中p1，p3，p4和p6.

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>

<div>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>

E:nth-child(n)和E:nth-last-child(n)

    <style>
        p,h1{
            height:30px;
            width:300px;
            border:1px solid #00A2E9;
        }
        p:nth-child(2n){
            background-color: #64b0ff;
        }
    </style>
-------------------------------------------
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>

<div>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</div>

运行效果

• nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素【每个父元素下的选择器会重新计算参数n】. 其中n是其参数，取值是整数值、表达式(2n+1、-n+5)和关键词(odd、even).

• 但是这种方法有很大的缺陷，渲染的原理是选中该父元素下的第n个子元素，然后核对选中的是否是特定的子元素，再进行渲染.但如果不是特定的子元素，那么该元素不会被渲染，并且参数n会直接跳到下一个取值.【如图h1没有被渲染，但是p2也没有被渲染】

• nth-last-child(n) 选择器和前面的nth-child(n)选择器一样，不同点只是从某父元素的最后一个子元素开始计算，这里的使用就不举例说明了.
  

E:nth-of-type(n) 和E:nth-last-of-type(n)

• E:nth-of-type(n)和E:nth-child(n)很相似，参数n 的取值规律一样.

• 这个方法正好弥补了E:nth-child(n)的缺陷，用E:nth-of-type(n)来定位于父元素中某种类型的子元素是非常好用的.

• E:nth-last-of-type(n) 选择器和前面的E:nth-of-type(n)选择器一样，不同点只是从某父元素的最后一个子元素开始计算，这里的使用就不举例说明了.

---

伪元素选择器

<style>
  选择器::伪元素{
    content:" "
</style>

常用伪元素选择器	作用
::after	在选中的元素的后面创建一个子元素
::before	在选中的元素的前面创建一个子元素
::first-letter	在选中的元素的第一个字
::first-line	在选中的元素的第一行

---

属性选择器

<style>
  E[attribute]{
    属性:值
}
</style>

所有元素选择器	作用	出自
[attribute]	选中有该属性的该元素	CSS2
[attribute=value]	选中有该属性且属性的值等于Value的元素	CSS2
[attribute^=value]	选中有该属性且属性的值以Value开头的元素	CSS3
[attribute|=value]	选中有该属性且属性的值以Value开头的元素，但值必须是整个单词	CSS2
[attribute$=value]	选中有该属性且属性的值以Value结尾的元素	CSS3
[attribute*=value]	选中有该属性且属性的值包含Value	CSS3
[attribute~=value]	选中有该属性且属性的值包含Value，但值必须是独立的	CSS2

• [attribute|=value]和[attribute^=value]的区别在于[attribute|=value]中的只能找到value开头,并且value是被-和其它内容隔开的.
• [attribute*=value]和[attribute~=value]的区别在于[attribute~=value]中的value必须被空格隔开的.

---

选择器优化

对于浏览器来说，解析每种选择器所耗费的时间并不是一样的。所以当我们使用选择器的时候也有必要了解如何才能写出最优选择器.

选择器效率

根据网站效率专家 Steve Souders 指出，各种 CSS 选择器的效率由高至低排序如下

*   id选择器（#myid）
*   类选择器（.myclassname）
*   标签选择器（div,h1,p）
*   相邻选择器（h1 + p）
*   子选择器（ul > li）
*   后代选择器（li a）
*   通配符选择器（*）
*   属性选择器（a[rel="external"]）
*   伪类选择器（a:hover,li:nth-child）

在以下代码中我们可以通过很多种方法去选中它，如p，.red，#test，[class="red"]等等. 但如按照执行效率来，id选择器是最佳的，其次是类选择器，然后是元素选择，最后才是属性选择器.

<p id="test" class="red">我用来测试选择器的优化</p>

选择器解读顺序

浏览器解读选择器，遵循的原则是从选择器的右边到左边读取.
**例如

<style>
  .list .item .item-tt{
    color:"blue";
  }
</style>

这个选择器中，浏览器先找的是.item-tt，然后继续向父级元素寻找.item，再找.list，这样才完成了最终的选择器匹配.
所以如果路径链越短，效率也就相应有所提高.

---

选择器参考手册

首先是W3school的选择器参考，归类很详细，非常适合入门学习：

• CSS 元素选择器
• CSS 类选择器详解
• CSS ID 选择器详解
• 属性选择器详解 | W3School
• CSS 后代选择器
• CSS 子元素选择器
• CSS 相邻兄弟选择器
• CSS 伪类
• CSS 伪元素

或者直接参考选择器手册：

• 选择器参考手册 | MDN（点击相应的选择器为英文链接，可以在地址栏中将 en-US 换成 zh-CN 即可）
• CSS 选择器 | 菜鸟教程
• 选择器参考手册 | W3School
• Selectors Level 3 | W3（官方参考手册，英文版）
• Selectors Level 4 | W3（第四代选择器草稿）

---

参考资料

• 如何提升 CSS 选择器性能
• CSS选择器的优化
• Efficiently Rendering CSS