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

标签：特殊性,样式,元素,最佳,选择器,CSS,属性
来源： https://www.cnblogs.com/rainbowly/p/12835474.html