CSS选择器与最佳实践

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

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

现在一起开启CSS的奇妙之旅吧!

1. CSS选择符

CSS选择器包括:

• 基本选择符

  • 类型（元素）选择符，比如：p, ul, li, h1等
  • 后代选择符（用于寻找特定元素或者元素组的后代，由其他两个选择器中间的空格表示
  • ID选择器和类选择器（分别用“#” 和"."表示）

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

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

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

  • 同辈选择符

    • 相邻同辈选择符(+)：选择位于某元素后面，并与该元素拥有共同父元素的元素
    • 一般同辈选择器(~)：选择某元素的同胞元素（要想在IE8及其之前的版本中使用这个选择器，必须声明 <!DOCTYPE>）

  • 属性选择器：基于元素是否有某个属性或者属性是否有某个值来选择元素

    •   # 具有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; }
        
        ...... # 还有诸如^=的属性选择器，有兴趣可去查询，虽然一般并不会运用。
      

  • 通用选择符(*)：就像通配符，它匹配所有可用元素。

  • 伪元素：页面中并不存在的元素，即我们选择的页面区域不是通过元素表示（不会为给页面添加样式而添加额外的标签，但是使用需要小心，不能用它们插入对交互有实质影响的内容，否则可能将使得CSS不能正确加载）

    • ::first-letter
    • ::first-line
    • ::before
    • ::after

  • 伪类：基于文档结构以外的情形为页面添加样式，用于选择元素的特定状态或者关系

    • :link
    • :visited
    • :target
    • :not
    • 结构化伪类(IE8以上得到普遍支持)
      • :nth-child
      • :nth-last-child
      • :first-child
      • :last-child
      • :only-child
      • :only-of-type
    • 表单伪类
      • :required
      • :optional
      • :valid和:invalid
      • :in-range
      • :out-of-range
      • :read-only
      • :read-write

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，恰当的使用继承也可以减少代码中选择器的数量和复杂性。

能够继承的属性：

• 字体(Font)属性
  • font
  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant
• 列表(List)属性
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
• 定位(Position)属性
  • cursor
  • visibility
• 表格(Table)属性
  • border-collapse
  • caption-side
  • empty-cell
• 文本(Text)属性
  • color
  • direction
  • letter-spacing
  • line-height
  • text-align
  • text-indent
  • text-transform
  • white-space
  • word-spacing
  • text-align-last
  • text-shadow
  • word-wrap
  • word-break

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