入门阶段 - css选择器攻略 - 《CSS-trip》

前言
css3选择器分类
选择器攻略
盲区
- 选择器的查询效率
- 浏览器读取选择器的顺序
个人经验
- 兼容
- 注意事项

前言

很多小伙伴对css选择器表示不屑，觉得很简单没必要学习，其实你究竟了解多少呢？当面试官问你的时候，你能分出哪些是css3新增的选择器，他们兼容如何？又该如何处理呢？

css3选择器分类

css3选择器在最新的版本中作为一个独立的模块分离了出来，而css选择器有哪些呢？又该如何分类，请看下图。

css选择器攻略 - 图1

选择器攻略

基本选择器
id,class,*通配符选择器，复合选择器（选择器分组），无兼容问题
层次选择器
后代选择器：e f;子选择器 e>f ;相邻兄弟选择器 e+f,只能选择之后的一个；通用兄弟选择器，e~f 之后的所有，卡可以选择多个；后面三个兼容ie7+
目标伪类选择器
e:target 针对连接到的部分，兼容ie9+
动态伪类
：linked,:visited,:active,:hover,:focus 其中active和focus 兼容8+支持
语言伪类
:lang(en)可以针对不同语言，兼容ie8+
ui元素状态伪类
：checked,:enabled,:disabled ,兼容ie9+
结构伪类
数量最多的一类，：first-child(css2),:last-child(css3),nth-child(n)筛选第几个，nth-last-child,nth-of-type(n),:root,:only-child,:empty ,等，兼容ie9+
否定伪类
：not() 针对性排除，兼容ie9+
伪元素
伪元素在新的规范中为双冒号，为了区别伪类，ie6-8只识别单冒号，写法不同，无兼容问题
属性选择器
针对属性，以及属性值筛选，筛选符号为| 筛选出等于val以及以val-开始，^以val开始的，* 包含val,$以val结束，ie7+ 支持

盲区

选择器的查询效率

下面选择器的效率，从上到下依次降低。

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

你可以参考这篇文章来查看如何书写高效的css选择器：链接，其具体建议如下：

避免普遍规则
不要在ID选择器前加标签名或类名
不要在类名选择器前加标签名
尽可能使用具体的类别
避免使用后代选择器
标签分类规则中不应该包含一个子选择器
子选择器的问题
借助相关继承关系
使用范围内的样式表

浏览器读取选择器的顺序

浏览器读取选择器的顺序是从右边到左边，而不是从左边到右边。所以如果你以前习惯了先写高查询效率的查询，再写低效率的，可以优化下了。

个人经验

兼容

汇总选择器的兼容性，慎重使用，比如针对ie8+ ，可以使用的有基本选择器，层次选择器，动态伪类选择器，语言伪类选择器，伪元素，属性选择器；针对ie6 建议只使用基本选择器以及简单的伪类、伪元素、后代选择器；针对现代浏览器，所有选择器可以放心使用。整体建议还是不要为了使用新的选择器而使用，要找到对应的使用场景，多使用基本选择器能避免低版本ie的适配问题。

使用适配的脚本文件，实现让ie6-8ie6-8支持属性选择器，伪类选择器和伪元素。具体的支持情况根据js库来决定。

备注：格外注意css针对ie浏览器的条件注释的写法。

<!- -[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
      <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]- ->

注意事项

Selectivizr自动检测最佳的JavaScript库，如果你JavaScript库都没有调用，则IE下的伪类是不起作用的。
样式属性必须使用<link>标签，以<style>标签定义的CSS样式是不会被解析的。
由于安全原因，样式文件需以域的形式调用，像是file:是不起作用的。
此效果非动态的。一旦样式被应用就被固定了，DOM改变时不会映射过去的。
如果JavaScript不可以，你可以使用<noscript>标签调用一个用以反馈提示的样式文件。
Selectivizr要想在IE下起作用，需要时标准模式，请检查您的页面头部是否有DTD 。

css选择器攻略

前言