xiong

CSS3系列-selector3

本篇文章所谈到的选择器均为CSS3中的选择器

选择器Key Point

在CSS的选择器中，大家可能会觉得各种错综复杂，现在我们就一起来捋一捋其中的规则和规律。
在CSS3中关于选择器的定义为：一个选择器是由一个或者多个简单选择器通过连接符构成的。
通过上面一句话可以提取出两个关键词：“简单选择器”和“连接符”。

“简单选择器( simple selector )”在CSS3的规范中指定为：

  • 类型选择器( type selector )
  • 全局选择器( universal selector )
  • 属性选择器( attribute selector )
  • 类选择器( class selector )
  • ID选择器( ID selector )
  • 伪类( pseudo-class )

“连接符( Combinators )”特指下面四种符号：

  • 大于符号( greater than sign )[u+003e, >]
  • 加号( plus sign )[u+002b, +]
  • 波浪号( tide )[u+007e, ~]和空格。

CSS3选择器 - 归总

通过CSS3的规范关于简单选择器的列表，可以看出在CSS3对简单选择器的变化主要是针对属性选择器和伪类。

属性选择器

如果说CSS2中属性选择器完成的是一个元素特定属性的选择，那么在CSS3中属性选择器则有了正则的成分在里面。在CSS3中属性选择器增加了类似正则里面“^”的开始选择符，”$”结尾选择符和“*”通配符。

E[foo^=”bar”]：以某个值开始的选择器。
这个属性选择符可以用来对选择器进行分类，比如给元素区分位置信息，选择出相似的元素。

<div>
  <p data-log-position="PLUGIN_HISTORY_CLICK">PLUGIN_HISTORY_CLICK</p>
  <p data-log-position="PLUGIN_HISTORY_CLICK">PLUGIN_HISTORY_CLICK</p>
  <p data-log-position="BAR_HISTORY_CLICK">BAR_HISTORY_CLICK</p>
  <p data-log-position="POPUP_HISTORY_CLICK">POPUP_HISTORY_CLICK</p>
</div>

See the Pen yeCkn by shawnxiao (@f2ecouple) on CodePen.


E[foo$=”bar”]:以某个值结束的选择器。
这个和正则符中的结尾有异曲同工的作用，选择出属性以某个值结束的标签。

<div>
<p data-log-position="PLUGIN_HISTORY_CLICK">PLUGIN_HISTORY_CLICK</p>
<p data-log-position="PLUGIN_HISTORY_CLICK">PLUGIN_HISTORY_CLICK</p>
<p data-log-position="BAR_HISTORY_HOVER">BAR_HISTORY_HOVER</p>
<p data-log-position="POPUP_HISTORY_CLICK">POPUP_HISTORY_CLICK</p>
</div>

See the Pen rIitH by shawnxiao (@f2ecouple) on CodePen.


E[foo*=”bar”]:属性中包含某个值的选择器。
简单来说，这个其实是一个通配符，即有就可，无需在乎位置。

See the Pen fAday by shawnxiao (@f2ecouple) on CodePen.

伪类选择器

在CSS3相关的选择器中，对伪类选择器的增加可是重中之重。
在这里我们对增加的CSS伪类选择器进行一系列的分类。

结构型伪类选择器(Structural pseudo-classes)

在CSS3中总共增加了11个结构型伪类选择器，加上CSS2中的结构型伪类选择器，一个有12个结构型伪类选择器。
虽然在CSS3的规范中没有对结构型伪类选择器再次分类，但是规范在设计时还是有所考虑的。
总体来说分为：从所处位置进行筛选(nth, first, last)，对关系进行筛选(child, sibling)。然后剩下的就是排列和组合的过程了。

  • 从元素关系入手: child, sibling
    • chilid类型：E:nth-child(n), E:nth-last-child(n), E:first-child, E:last-child, E:only-child,
    • sibling类型：E:nth-type(n), E:nth-last-type(n), E:first-of-type, E:last-of-type, E:only-of-type
  • 从所处位置进行分类：nth, last, first, only
    • nth: E:nth-child(n), E:nth-last-child(n), E:nth-type(n), E:nth-last-type(n)
    • first: E:first-child, E:first-of-type
    • last: E:last-child, E:last-of-type
    • only: E:only-child, E:only-of-type

对于结构型伪类选择器中的参数 n 的计算方法可参见下表：

n 2n - 1 2n + 1 -2n + 4 2n
0 - 1 4 -
1 1 3 2 2
2 3 5 - 4
3 5 7 - 6
4 7 9 - 8

这里举一些比较有代表性的例子来说明结构型伪类选择器。

E:nth-child(n):选择一个父元素的第n个子元素。
li:nth-child(-2n + 4)

See the Pen kqEHv by shawnxiao (@f2ecouple) on CodePen.

li:nth-child(odd)

See the Pen GwIiE by shawnxiao (@f2ecouple) on CodePen.

E:nth-last-child(n):从最后一个开始算的第n个子元素
n的取值形式：an + b(a, b为整数), odd, even

See the Pen ixoha by shawnxiao (@f2ecouple) on CodePen.

E:only-child:该元素的父元素只有一个这样的子元素。

See the Pen tLFkw by shawnxiao (@f2ecouple) on CodePen.

E:nth-type(n): E元素，同为该类型的第n个兄弟元素。

See the Pen yIbHm by shawnxiao (@f2ecouple) on CodePen.

目标伪类选择器(Target pseudo-classes)

目标伪类选择器，可能大家一听到这个名词是不是很好理解。但是说一个场景，当有一个需求是通过链接在页面的段落间进行跳转时，大家会怎么去做？如果对跳转的效果没有过多的
要求时，相信大家首先想到的方法是，给anchor标签的herf属性设定为“#ID”,这里的ID为需要跳转到的元素的ID。其实在这里需要跳转到的那个元素就叫target。话不多说，大家直接点下面demo
中的链接，然后观察段落颜色的变化，相信会明白目标伪类选择器器的作用。
E:target

See the Pen KwGqe by shawnxiao (@f2ecouple) on CodePen.

UI元素状态伪类选择器(The UI elements states pseudo-classes)

enable 和 disabled
disabled伪类即选择元素状态为disabled的元素，这种元素通常是不能被聚焦或者激活的元素，它有diabled属性。

See the Pen LIaAd by shawnxiao (@f2ecouple) on CodePen.

checked伪类选择器
对于checkebox或者radio button一类的元素，当为选中状态时的伪类选择器。

See the Pen wBtrI by shawnxiao (@f2ecouple) on CodePen.

逻辑非伪类选择器(Negation pseudo-classes)

逻辑非伪类选择器，即:not(x)选择器，这里的x可以是任意简单选择器(Simple selector)

See the Pen djKuA by shawnxiao (@f2ecouple) on CodePen.

总结

上面是关于CSS3新增选择器的基本内容，现在反观新增的选择器，我们不难发现其实CSS更多的向一门语言靠近。
在新增的伪类选择器中我们看到了函数的身影在其中，比如not(), nth-child(), nth-type()等。