首页 > 编程笔记

CSS属性选择器的用法

下表给大家罗列了 CSS 提供的属性选择器。

表 1 属性选择器
选择器 功能描述
[attribute] 用于选取带有指定属性的元素
[attribute=value] 用于选取带有指定属性及指定属性值的元素
[attribute*=value] 用于选取属性值中包含指定值的元素
[attribute~=value] 用于选取属性值中包含指定值且该值是完整单词的元素
[attribute^value] 用于选取属性值以指定值开头的元素
[attribute |=value] 用于选取属性值以指定值开头且该值是完整单词的元素
[attribute$=value] 用于选取属性值以指定值结尾的每个元素

下面通过几个简单的实例介绍属性选择器。先准备一个基础网页，网页中一共有 4 个段落，前 3 个段落都设置了 data-description 属性。HTML5 中可以给标记自定义属性，将 data- 作为前缀，例如本例中使用 data-description 作为名字：
<!DOCTYPE html>
<html>
<head>
     <style>
       ……这里添加样式……
     </style>
</head>
<body>
    <h1>如何构建一个网页</h1>
    <div class="outer">
      <div class="inner">
        <p data-description="first">
          1. 自从互联网走进千家万户，人们已经离不开它。
        </p>
      </div>
      <p data-description="second paragraph">2. 构建一个专业的网站需要进行大量的工作，建议您从简单的工作开始。</p>
    </div>
     <p data-description="third paragraph">3. 首先需要学习一些关于HTML的基本知识。</p>
    <p>4. 然后学习一些关于CSS的知识。</p>
</body>
</html>

1、属性存在选择器

为上面的基础页面设置如下的 CSS 规则： 
<style>
p[data-description]{
     background-color:#ccc;
}
</style>
如果某个元素带有方括号，里面指定某个属性名称，则仅选中存在该属性的元素。例如在上面的代码中，只有前 3 个段落有 data-description 属性，因此这 3 段会被设置为灰色背景。

2、属性等于选择器

为前面的基础页面设置如下的 CSS 规则： 
<style>
p[data-description=first]{
     background-color:#ccc;
}
</style>
如果某个元素带有方括号，里面指定某个属性名称的同时，还用“=”连接一个字符串，则仅选中存在该属性且该属性值为“=”后面的值的元素。

例如在前面的代码中，只有第 1 个段落具有 data-description 属性且属性值等于 first，因此第 1 个段落会被设置为灰色背景。

如果“=”后面指定的属性值中存在空格，就要用引号把属性值引起来，否则可以省略引号。例如下面这段代码： 
<style>
p[data-description="second paragraph"]{
     background-color:#ccc;
}
</style>

3、属性包含选择器

为上面的基础页面设置如下的 CSS 规则： 
<style>
p[data-description*=fir]{
     background-color:#ccc;
}
</style>
如果某个元素带有方括号，里面指定某个属性名称的同时，还用“*=”连接了一个字符串，则仅选中存在该属性且该属性值包含“*=”后面的值的元素。例如在前面的代码中，第 1 个段落具有 data-description 属性且属性值等于 first，它包含 fir，因此第 1 个段落会被设置为灰色背景。

此外，还有一种单词包含选择器，把“*=”改为“~=”，则包含的对象必须是整个单词才会被选中。例如下面这段代码，将不会选中任何元素。 
<style>
p[data-description~=fir]{
     background-color:#ccc;
}
</style>

而下面这段代码，则会选中第 1 个段落，因为 first 是一个完整的单词。 
<style>
p[data-description~=first]{
     background-color:#ccc;
}
</style>
除了上面介绍的相等、包含之外，还有以字符串开头、结尾的属性选择器，其用法与前面介绍的选择器类似，不再赘述。

推荐阅读