如何使用新的CSS3选择器？

相关的书

HTML5和CSS3全合一的傻瓜，第三版。

由安迪•哈里斯

CSS3支持几个新的选择器，它们具有一些您应该熟悉的有趣的新功能。您可以使用这些新功能以更好的方式增强页面。

属性选择

现在可以将样式应用于具有特定属性值的任何元素。例如，输入标签采用不同的形式，都由type属性决定。如果您将单个样式应用于输入元素，则该样式将应用于许多不同类型的元素:复选框、文本字段和单选按钮。通过使用新的属性语法，可以将样式应用于任何输入元素:

输入(type = "文本"]{

background - color:# CCCCFF;

}

您可以使用带有或没有标记类型的样式，但是如果您选择一个非常常见的属性，则可能会出现意外的副作用。

不

有时你需要逆向选择。例如，假设您想将一个样式应用到所有非特殊类成员的段落:

p:not(。){

边界:1 px固体红;

}

NTH-CHILD

nth-子选择器允许您在组中选择一个或多个元素。基本版本使用数字输入:

# myList >李:nth-child(1){

边界:1 px固体蓝色;

}

这允许您将样式应用于一组元素的第一个。在示例中，有一个包含四个项的列表。该样式应用于列表项，而不是列表。

数值实际上可以是一个公式，比如a +b。如果你喜欢代数(谁不喜欢呢?)，你可以选择所有偶数编号的元素:

# myList >李:nth-child(2 n){

边界:1 px固体蓝色;

}

一个类似的公式可以用来挑选奇数的孩子。

# myList >李:nth-child(2 n + 1){

边界:1 px固体蓝色;

}

您可以使用这个公式系统来得到所有类型的分组，但是大多数人只需要一个特定的元素，或者所有的偶数或奇数行。CSS3提供快捷的关键字，甚至是奇数，所以你不必使用数学:

# myList >李:nth-child(甚至){

颜色:白色;

背景颜色:红色;

}

关键字允许您从组中选择最后一个元素。这种选择技术还有一些变化:

:和nth-child一样工作，只是从元素组的末尾开始，而不是开始。

:这个选择器就像nth-child一样，只是它会过滤到特定类型，并且忽略不完全相同类型元素的任何元素。

最后一个子元素:这个(自然足够)选择最后一个子元素。

最后一种类型(N):类似于nth类型，但从组的末尾。

第一个元素:获取第一个元素(技术上这在CSS2中是可用的，但很少使用)。

这些选择工具在所有最近的浏览器中都得到了完全支持。然而，由于它们通常只是用来提高可读性，所以使用它们应该是安全的。较老的浏览器简单地跳过了样式。

其他新的伪类

伪类允许您根据元素的状态指定样式。现代CSS支持一些新的伪类:

:hover:悬停伪类从一开始就是CSS的一部分，但是它的正式定义只适用于标记。现在:悬停伪类可以应用于任何元素。如果鼠标位于元素之上，则该元素将激活状态。注意，移动设备并不总是支持，因为指示设备的位置在项目被激活之前是未知的。

:焦点:当一个元素准备接收键盘输入时，焦点伪类被激活。

:在当前使用时，表单元素是活动的:例如，当按钮被按下但尚未释放时。移动设备经常直接跳到活动模式而不经过悬浮模式。在使用状态进行样式化时，这可能是一个重要的设计考虑。

所有现代浏览器都完全支持状态伪类，除了IE浏览器。在IE的早期版本中，它的支持是有限的。