CSS 对五种选择器的理解与优先级排序

背景

大二学习了网页设计基础，选择器在大一下学期的时候看视频里讲的很粗略，仅能够理解，但是对于优先级来说并不是很清楚。于是今天对五种选择器 ,、>、 、+、~ 实验探究了一番。

对选择器 , > + ~ _ 的理解

分类选择

  1. 逗号（CSS1）

    能够给所有选择到的元素进行样式添加。这是优先级最低的一种选择器（详见优先级排序）

深入递进选择

  1. 空格（CSS1）

    能够对一个元素里面所有的元素添加样式

  2. 尖号（CSS2）

    能够对一个元素里面所有的子元素添加样式，相比空格，只写一个 > 表示它只对内部一层选择，不会继续深入选择

同层顺序选择

  1. 加号（CSS2）

    表示一个元素后面紧挨的一个元素

    a+p表示在同层下，只选择前面紧挨着是a标签的p标签。也可以多个相加

    a+h1+p表示在同层下，必须是这三个紧挨着一串的情况下，选择最后的p标签

  2. 波浪号（CSS3）

    表示一个元素后面含有的一个元素，相比加号，相比加号，它可以任意跨越标签

    a~p 表示在同层下，选择前面有a标签的p标签

    a~p~h1 表示在同层下，选择必须开头必须是a标签，中间必须含有p标签，最后末尾是h1标签这样顺序串的最后的h1标签。

同层选择器虽然写的很长，但它实际上只是选择一个或一类元素，前面的顺序只是作为一种查找的限制

对选择器的优先级排序

优先级越高表示运算时先和谁结合，优先级越低表示间隔能力越强，比如 a+b*c+d 我们人看的时候会先把bc结合起来，ab和cd之间间隔起来看。因此乘法的优先级高于加法。

结论

从上到下优先度按从高到低排列

  1. + ~ 当加号和波浪号两种选择器同时在一起时，按照从左往右的顺序进行
  2. _ > 当空格和尖号两种选择器同时在一起时，按照从左往右的顺序进行 (此处用下划线表示空格)
  3. ,

探究过程

下文中的小括号只用来直观展示运算顺序，css中并不支持这种写法

  1. [ ]和[,]比较

    例如：div span,h1

    情况一：(div span),h1 表示div里的span和所有的h1

    情况二：div (span,h1) 表示div里的span和div里的h1

    结果：情况一正确

  2. [ ]和[>]比较

    不会产生歧义，都表示递进，从左到右即可，所以这两种运算符应该是同级的

  3. [>]和[,]比较

    例如：div>p,h1

    情况一： (div>p),h1 表示div里的子元素p和全局所有的h1

    情况二： div>(p,h1) 表示div的子元素p和子元素h1

    结果：情况一 正确 即尖号的优先级高于空格，同理可得空格的优先级也高于逗号

  4. [,]和[+]比较

    例如：h1,div+p

    情况一：h1,(div+p) 表示全局的h1和全局中div紧接后面的p

    情况二：(h1,div)+p 表示全局h1后面紧接着的p，和，全局中div后面紧接着的p

    结果：情况一正确，说明+号优先级比,高

  5. [>]和[+]比较

    例如：.a1>.a2+.a3>.a4

    情况一：.a1>(.a2+.a3)>.a4 表示a1里面的a3元素，（a3元素必须是紧挨在a2后面的那种）然后这种a3里面的a4

    情况二：(.a1>.a2)+(.a3>.a4) 这显然一看就逻辑上不正确，a2和a4都不在一个父元素里，怎么可能紧挨呢？

    结果：情况一正确，加号优先级高于尖号和空格

  6. [+]和[~]比较

    例如：.a1+.a2~.a3+.a4 说明 a1 a2 ... a3 a4 选最后的a4

    情况一：.a1+.(a2~.a3)+.a4 表示顺序必须是a1紧挨a3紧挨a4，选最后的a4，并且中间的a3必须要求前面跨越有a2，所以顺序为a2 a1 a3 a4 可以选到，a2在最前面可以的。

    情况二：(.a1+.a2)~(.a3+.a4) 和从左往右顺序计算没有区别

    结果：不存在情况一的结果，说明这两种符号同级，如果放在一起则遵循从左到右的运算顺序