CSS选择器笔记

关系选择器

各种关系选择器

后代选择器选中block中的2个p元素
子元素选择器只选中block的直接子元素p元素(即仅第一个p元素)

伪类选择器

伪类选择器
伪类选择器

伪元素选择器

伪元素选择器

属性选择器

下面我们使用这四个 a 元素来具体实践下：

<a href="https://ke.qq.com" target="_blank">腾讯课堂</a>
<a href="css-basic.pdf" >CSS学习文档</a>
<a href="css.png" >CSS 脑图</a>
<a href="http://imweb.io" title=“IMWeb”>IMWeb学院</a>

要求如下:

• 选中 title 属性链接
• 选中新窗口打开的链接（可在后面添加一个icon，以区分其他链接）
• 选中不同的文件类型链接（可在后面添加对应的图标，以表示资源类型）
• 选中绝对路径链接

对应的选择器如下：

/* 选中 title 属性链接 */
a[title] {}

/* 选中新窗口打开的链接 */
a[target="_blank"] {}

/* 选中 pdf */
a[href$=".pdf"] {}

/* 选中 png */
a[href$=".png"] {}

/* 选中绝对路径链接 */
a[href^="http://"],
a[href^="https://"] {}

属性选择器 | W3School

选择器参考手册

一下讲了这么多选择器，估计一时半会是消化不了的。不过没关系，我们可以慢慢来，视频可以多看几次，也可以先有个印象继续学习后面的内容，然后再回过头来消化消化。同时这里也为你找了一些非常具有参考价值的选择器文档，可以方便你学习查阅。

首先是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（第四代选择器草稿）

选择器效率

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

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

选择器解读顺序

一般来说，在具体的项目中，HTML 结构都比较复杂，所以关系选择器使用非常的普遍。对于关系选择器来说，我们的阅读习惯是从左到右，但是浏览器解读选择器，遵循的原则是从选择器的右边到左边读取。

如对于选择器.list .item .item-tt，浏览器先找的是.item-tt，然后继续向父级元素寻找.item，再找.list，这样才完成了最终的选择器匹配。

所以如果路径链越短，效率也就相应有所提高。这里建议选择器的层级最多不要超过4层，如.demo .list .item .item-tt .tt-link就有5层了，可根据实际情况考虑缩短为4层以内，如.demo .item-tt .tt-link

参考资料

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