CSS选择器与最佳实践

原文: CSS选择器与最佳实践

有效且结构良好的文档为咱们要应用的样式提供了一个框架，但将CSS样式应用于特定的HTML元素，须要找到该元素。在CSS中，执行该任务的样式规则称为选择器。在本文，你能够学习到：

• CSS选择器
• CSS层叠和特殊性
• CSS继承
• CSS实践

如今一块儿开启CSS的奇妙之旅吧!

1. CSS选择器

CSS选择器包括:

• 类型选择器（也成为元素选择器），好比：p, ul, li, h1等

• 后代选择器（用于寻找特定元素或者元素组的后代，由其余两个选择器中间的空格表示）以下所示

  • ul a {color: red;} # 表示ul的后代的a元素， 其余a元素不受影响

• ID选择器和类选择器（分别用“#” 和"."表示）

• 伪类，如:link, :visited称为连接伪类，只应用于锚元素。:hover, :active, :focus被称为动态伪类，理论上可应用于任何元素（IE6只注意应用于锚元素的:link, :visited彻底忽略:focus；IE7任何元素都支持:hover,可是忽略:active,:focus）

• 伪元素选择器，包括:before, :after,:first-letter,:first-line。

• 通用选择器（*），其做用就像通配符，它匹配全部可用元素。

• 高级选择器（IE6和更低版本不支持）

  • 子选择器：选择元素的直接后代，示例：

    • ul > li {font-size:20px;} #对于子选择器 若是父元素和子元素之间有注释，IE7中会出问题。

  • 相邻同胞选择器：根据相邻关系应用样式，示例：

    • shuh2 + p {font-size:1.2em;} # 对h2元素后的第一个p元素应用样式
        						  # 在目标元素之间有注释，IE7也会有问题

  • 同胞选择器：选择某元素的同胞元素，示例

    • /* 设置同一父元素下的 p 元素以后的每个 ul 元素的背景颜色 要想在 IE8 及其以前的版本中使用这个选择器，必须声明 <!DOCTYPE>。 */
        p~ul {
        	background:#ff0000;
        }

  • 属性选择器：根据某个属性是否存在或者属性的值选择元素。示例：

    • # 具备title属性的a元素，字体为红色
        a[title] {color:red;} 
        
        # rel属性值为”nofollow“的a元素，字体为蓝色
        a[rel="nofollow"] {color: blue;} 
        
        # 属性值有多个值，包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值;
        p[title~=hello] { color:blue; } 
        
        #属性值组成中包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值
        p[lang|=en] { color:blue; }
        
        ...... # 还有诸如^=的属性选择器，有兴趣可去查询，虽然通常并不会运用。

2. 层叠和特殊性

在一个样式表中，寻找同一个元素可能有多个规则。CSS经过层叠的过程处理这种冲突。层叠给每个规则分配一个重要度，层叠的重要度次序以下：

• 标有!important 的用户样式
• 标有!important 的做者样式
• 做者样式
• 用户样式
• 浏览器/用户代理应用的样式

而后，根据选择器的特殊性决定规则的次序。具备更特殊选择器的规则优先于具备通常选择器的规则。若是两个规则的特殊性相同，后定义的优先。

2.1 特殊性

规则的特殊性基于选择器的特殊性。为了计算规则的特殊性，给每种选择器都分配一个数值。而后，将规则的每一个选择器的值加在一块儿，计算出规则的特殊性。选择器的特殊性分为四个等级：a,b,c,d

• 若是是行内样式，即元素的style属性中的规则，a=1

• b等于ID选择器的总数

• c等于类，伪类，和属性选择器的数量

• d等于类型选择器和伪元素选择器的数量

• 通配符和结合符特殊性最低，为0

示例：

选择器	特殊性	以10为基数的特殊性
style=""	1,0,0,0	1000
container #nav {}	0,2,0,0	200
container .banner {}	0,1,1,0	110
p.commited {}	0,0,1,1	11
p {}	0,0,0,1	1

虽然这里给出了每一个类型选择器的特殊性的数值，可是基本上，用style属性编写的规则总比其余任何规则特殊。具备ID选择器的规则比没有ID选择器的规则特殊，具备类选择器的规则比只有类型选择器的规则特殊。最后，当两个规则的特殊性相同，那么后定义的规则优先。

3. 继承

继承和层叠虽然初看上有点类似可是概念实际上不太同样。继承是一个比较容易理解的概念。应用样式的元素的后代会继承样式的某些属性，好比颜色和字号。若是将主体的字号设置为1.4em，那么页面上的全部内容应该也会继承这个字号（windows的IE在继承表格字号方面有问题，须要在表格单独设置字号或者指定表格应该继承字号）。

若是在主体上设置字号，咱们会发现页面上的标题没有采用这个字号，这是因为浏览器的默认样式表设置了标题字号，直接应用于元素的任何样式表总会覆盖继承而来的样式（继承而来的样式的特殊性为空）。

继承这一特性十分有用，能够使得开发人员没必要在元素的后代上添加相同的样式。正如恰当的使用层叠能够简化CSS，恰当的使用继承也能够减小代码中选择器的数量和复杂性。

4. CSS最佳实践

该小结将提供一些本人写CSS的最佳实践，以为不错能够归入本身的知识体系。

• 当规则包含多个选择器，每一个选择器声明独占一行

• >，+,~选择器的两边各保留一个空格

• 每一个属性声明末尾加分号

• 在url中使用双引号，属性选择器的属性值也使用双引号

• 单个属性声明不换行

• 不为id选择器、类选择器添加类型选择器进行限定(对性能和维护都有影响，位置靠后的限定条件应该尽量精确)

  • /* 不推荐 */
      p .articel { width:100px; }
      
      /* 推荐 */
      
      .article { width:100px; }

• 选择器的嵌套层级应不大于3层

• 鼠标手型

  • 用户能够点击的盒子声明cursor:pointer;以显示手型
  • 图片放大缩小 cursor:zoom-in , cursor:zoom-out

• 左右浮动分离

• 不适用‘*’选择器

• 属性值0后面不加单位

• 正确使用display属性

  • display: inline后不该该再使用 width、height、margin、padding 以及 float；
  • display: inline-block 后不该该再使用 float；
  • display: block 后不该该再使用 vertical-align；
  • display: table-* 后不该该再使用 margin 或者 float；
  • 尽可能少用float