重拾css(6)——选择器

前文示图中展示了浏览器的渲染过程，那么css与html是如何结合的呢？
答案是——选择器！

1.选择器

可分为两大类：

1. 标签选择器（*是特殊的标签），可单标签，也可上下文多标签；

2. 属性选择器（id和class本质上也是属性）。

1.1 标签选择器

1.1.1 通用选择器 *

通用选择器大家应该都比较熟悉了，最常用的就是重置浏览器默认样式。

1.1.2 单标签

文档的标签就是最基本的选择器，例如：

html {color:black;}
p {color:gray;}
h2 {color:silver;}

单标签选择器可以并列使用，即单标签分组，例如：

html, p, h2 {color:black;}    //同时选中了html、p、h2三个标签

1.1.3 多标签

多标签选择器一般和html上下文有关，它有以下几种分类：

1. 后代选择器，选择一个祖先的所有子孙节点，例如 div p{…}

2. 子元素选择器，选择一个父元素的所有直属节点，只包含子代，不包含孙代及更后代，例如 div > p{…}

3. 相邻兄弟选择器，选择某一个元素紧挨着的兄弟节点，例如 li + li{…}

4. 同代选择器，选择某一个元素的所有同胞节点，即有相同祖先节点的同代兄弟（不需要相邻），例如 span ~ a{…}

5. 以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）
   典型应用：

样式实现代码：

ul li+li {
    border-top: 1px solid #ccc;
}

1.2 属性选择器

1.2.1 特殊1：id选择器

css选择器是根据html节点的特性来设置的，id也是一个属性，只是它是一个比较特殊的属性，每个html节点的id不能重复。

　　由于特殊，而且比较常用，所以就单独给id选择器一个“#”，本质上就是一个属性选择器。下面两行代码的执行效果完全相同：

#div1 {border:1px solid #ccc;}
div[id='div1']{border:1px solid #ccc;}

1.2.2 特殊2：class选择器

class也是一个特殊的属性，之所以把它放在属性选择器下，和上文将的id一样。

1.2.3 属性选择器

属性选择器有两种情况：

1. 只通过属性名选择：img[title]{…} //选中具体title属性的img

2. 通过属性名和属性值选择：input[type=’text’]{…} //选中type属性值为text的input

2.伪类和伪元素

上文提到了若干种选择器类型，伪类和伪元素可针对任何一种选择器使用。

2.1 伪类

伪类分为UI伪类和结构化伪类。

2.1.1 UI伪类

常用的UI伪类实例：

a:link {color: #FF0000}        // 未访问的链接
a:visited {color: #00FF00}    // 已访问的链接 
a:hover {color: #FF00FF}    // 鼠标移动到链接上 
a:active {color: #0000FF}    // 选定的链接 

input[type='text']:focus {}    //获得鼠标焦点的输入框
#title1:target {}    //突出显示活动的 HTML 锚

2.1.2 结构化伪类（低版本IE不支持）

常用的结构化伪类实例：

table tr:nth-child(even) {}    //even偶数，odd奇数
table tr:nth-child(odd) {}
table tr:nth-child(n) {}    //选中第n个
table tr:first-child {}
table tr:last-child {}

2.2 伪元素

伪元素是非常重要的概念，其中较常用的是:before和:after
基本用法：

            span:before {
                content: 'Hello ';    /*或者unicode编码的形式*/
                color: red;    /*还可以定义添加内容的样式*/
            }
            span:after {
                content: ' Zhang';
            }

            <span>Jerry</span>

显示结果：

可见:before和:after可以用于为元素前后添加内容。

应用场景：

第一，添加icon小图标。例如添加fontAwesome图标库中的图标

第二，清除浮动。

3.选择器的扩展

选择器本来是css的一种规则，用于为css选择html节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。

• jQuery
  jQuery被推广流行的根本原因就是它的“Query”——基于css选择器的“Query”。现在的浏览器都支持querySelectAll()方法了，其实这就是W3C“抄袭”的jQuery的设计。

• zen-Coding
  jquery可以通过一段css选择器表达式从既有的html结构中选择符合表达式的dom组，但是zen-coding反其道而行之——可以根据css选择器表达式创造出html节点。不得不佩服这帮人的创造力。

zen-Coding可以大大提高编码效率，不妨一试。