关系选择器
各种关系选择器
后代选择器选中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的选择器参考，归类很详细，非常适合入门学习：
- 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
网友评论