前端CSS

CSS选择器和层叠


css的选择器是css中的基本内容，由于前些日子有一道笔试题中出现了一堆我没用过的选择器，所以这里对其进行一下总结，主要介绍各种选择器类型及用法，层叠的规则。

CSS选择器和层叠

1.选择器

  • 上下文选择器

    • 元素选择器
    • 后代组合式选择器(descendant combinator selector)

  • 特殊的上下文选择器

    • 子选择器 >

      标签1 > 标签2

      标签2必须是标签1的子元素，或者反过来说，标签1必须是标签2的父元素。与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

    • 紧邻同胞选择器 +

      标签1 + 标签2

      标签2必须紧跟在其同胞标签1的后面。

    • 一般同胞选择器 ~

      标签1 ~ 标签2

      标签2必须跟（不一定紧跟）在其同胞标签1后面

    • 通用选择器 *

  • ID和类选择器

    • 什么时候用ID，什么时候用类

      ID的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。
      相对来说，类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符，以便我们为这些元素应用相同的CSS样式。而且，使用类也让为不同标签名的元素应用相同的样式成为可能。

  • 属性选择器

    • 属性名

      标签名[属性名]

      选择任何带有属性名的标签名。

    • 属性值

      标签名[属性名="属性值"]

      选择任何带有值为属性值的属性名的标签名。

  • 伪类

    伪类分两种。
    UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

    1. 链接伪类

      针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。

      • Link。此时，链接就在那儿等着用户点击。
      • Visited。用户此前点击过这个链接。
      • Hover。鼠标指针正悬停在链接上。
      • Active。链接正在被点击（鼠标在元素上按下，还没有释放）。

      这4个伪类的特指度相同，要按LVHA的顺序添加使用

    2. :focus伪类

      e:focus

      表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。

    3. :target伪类

      e:target

      如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。

      例如：对于下面这个链接
      <a href="#more_info">More Information</a>
      位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：
      <h2 id="more_info">This is the information you are looking for.</h2>
      那么，如下CSS规则
      #more_info:target {background:#eee;}
      会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。

      维基百科在其引证中大量使用了:target伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target应用的突出显示，很难知道你点击的链接对应着一大堆引证中的哪一个。

    结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

    1. :first-child和:last-child

    2. :nth-child

      e:nth-child(n)

      e表示元素名，n表示一个数值（也可以使用odd或even）

      :nth-child伪类最常用于提高表格的可读性

  • 伪元素

    1. ::first-letter伪元素
    2. ::first-line伪元素
    3. ::before和::after伪元素
      可用于在特定元素前面或后面添加特殊内容。

      搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。

2.层叠

  • 特殊性

    选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：

    • 对于选择器中给定的各个ID属性值，加0，1，0，0。

    • 对于选择器中给定的各个类属性值，属性选择或伪类，加0，0，1，0。

    • 对于选择器中给定的各个元素和伪元素，加0，0，0，1。

    • 结合符和通配符选择器对特殊性没有任何贡献

  • 继承

    一般地，大多数框模型属性（包括外边距、内边距、背景和边框）都不能继承

  • 重要性

    有时某个声明可能非常重要，超过了所有其他声明。CSS2.1称之为重要声明（原因显而易见），并允许在这些声明的结束分号之前插入！important来标志。例如：

    p.dark {color:#333 !important; background: white;}

    层叠

  • CSS就叫做层叠样式表，让样式层叠在一起，这是通过结合继承和特殊性做到的。CSS2.1的层叠规则相当简单：

    找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。

  1. 按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。

  2. 按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的读者样式要强干所有其他样式，这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。

  3. 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。

  4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

更多示例和参考：
1.http://www.ayqy.net/doc/css2-1/cascade.html
2.http://cdn1.w3cplus.com/css/advanced-html-css-lesson3-complex-selectors.html

分享到