属性选择器

  • 概述:CSS 构建
  • 从 HTML 的学习中,你已经知道,元素可以带有属性,它提供了关于如何标记的更详细信息。CSS 中,你能用属性选择器来选中带有特定属性的元素。本节课中,我们将会为你展示如何使用这些很有用的选择器。

    学习前提: 基础电脑知识, 安装了基本的软件 处理文件 的基本知识,HTML 基础(学习 HTML 介绍 ),以及对 CSS 工作原理的了解(学习 CSS 初步 ) 学习属性选择器是什么,如何使用。

存否和值选择器

这些选择器允许基于一个元素自身是否存在(例如 href )或者基于各式不同的按属性值的匹配,来选取元素。

p[class~="special"]

匹配带有一个名为 attr 的属性的元素,其值正为 value ,或者匹配带有一个 attr 属性的元素,其值有一个或者更多,至少有一个和 value 匹配。

注意,在一列中的好几个值,是用空格隔开的。

[ attr |= value ] div[lang|="zh"] 匹配带有一个名为 attr 的属性的元素,其值可正为 value ,或者开始为 value ,后面紧随着一个连字符。

下面的示例中,你可以看到这些选择器是怎样使用的。

  • 使用 li[class] ,我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。
  • li[class="a"] 匹配带有一个 a 类的选择器,不过不会选中一部分值为 a 而另一部分是另一个用空格隔开的值的类,它选中了第二项。
  • li[class~="a"] 会匹配一个 a 类,不过也可以匹配一列用空格分开、包含 a 类的值,它选中了第二和第三项。