如何使用新的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的早期版本中,它的支持是有限的。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180309A1N1U800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券