[属性] | CSS-Tricks 中文

Sara Cope 于 2019 年 6 月 28 日

您可以通过多种方式在 CSS 中选择元素。最基本的选择是通过标签名称，例如 p { }。几乎所有比标签选择器更具体的都使用属性 - 类 和 ID 都选择 HTML 元素上的这些属性。但是，类 和 ID 不是开发人员可以选择的唯一属性。我们可以使用元素的任何属性作为选择器。

属性选择具有特殊的语法。以下是一个示例

a[href="https://css-tricks.cn"] {
  color: #E18728;
}

这是一个精确匹配选择器，它只会选择具有确切 href 属性值的链接“https://css-tricks.cn”。

七种不同的类型

属性选择器默认区分大小写（参见下面区分大小写匹配），并用方括号 [] 括起来。

有七种不同的类型匹配您可以使用属性选择器找到，并且每种类型的语法都不同。每个更复杂的属性选择器都建立在精确匹配选择器的语法之上 - 它们都以属性名称开头，以等号结尾，然后是属性值，通常用引号括起来。属性名称和等号之间的内容是选择器之间差异的来源。

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

值包含：属性值包含一个术语作为唯一值，列表中的值或作为另一个值的组成部分。要使用此选择器，请在等号之前添加一个星号 (*)。例如，img[alt*="art"] 将选择具有“抽象艺术”和“运动员开始一项新的运动”的 alt 文本的图像，因为值“art”在“starting”这个词中。

值在以空格分隔的列表中：值是唯一的属性值，或者是以空格分隔的一组值中的一个完整值。与“包含”选择器不同，此选择器不会将值视为一个词片段。要使用此选择器，请在等号之前添加一个波浪号 (~)。例如，img[alt~="art"] 将选择具有“抽象艺术”和“艺术展”的 alt 文本的图像，但不选择“运动员开始一项新的运动”（“包含”选择器会选择）。

值以开头：属性值以选定术语开头。要使用此选择器，请在等号之前添加一个插入符 (^)。别忘了，区分大小写很重要。例如，img[alt^=”art”] 将选择具有“艺术展”和“艺术模式”的 alt 文本的图像，但不选择具有“亚瑟·米勒”的 alt 文本的图像，因为“Arthur”以大写字母开头。

值是连字符分隔列表中的第一个：此选择器与“以开头”选择器非常相似。在这里，选择器匹配一个值，该值要么是唯一的，要么是连字符分隔的值列表中的第一个值。要使用此选择器，请在等号之前添加一个管道字符 (|)。例如，li[data-years|="1900"] 将选择具有“1900-2000”的 data-years 值的列表项，但不会选择具有“1800-1900”的 data-years 值的列表项。

值以结尾：属性值以选定术语结尾。要使用此选择器，请在等号之前添加一个美元符号 ($)。例如，a[href$="pdf"] 选择每个以 .pdf 结尾的链接。

关于引号的说明：在某些情况下，您可以省略围绕值的引号，但是没有引号进行选择的规则在跨浏览器方面是不一致的。引号始终有效，因此，如果您坚持使用引号，则可以确保您的选择器将起作用。

查看 CodePen 上的属性选择器，由 CSS-Tricks (@css-tricks) 创建。

有趣的事实：这些值被视为字符串，因此您不必像在类或 ID 选择器中使用不寻常字符时那样进行任何复杂的字符转义以使它们匹配。

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

不区分大小写匹配

不区分大小写的属性选择器是 CSS 工作组的选择器级别 4 规范的一部分。如上所述，属性值字符串默认区分大小写，但可以通过在结束括号之前添加 i 来更改为不区分大小写

[attribute="value" i] {
  /* Styles here will apply to elements with:
    attribute="value"
    attribute="VaLuE"
    attribute="VALUE"
    ...etc
  */
}

不区分大小写匹配对于针对包含不可预测的、人工编写的文本的属性非常有用。例如，假设您正在为聊天应用程序设计一个气泡，并且想要向任何包含“hello”文本的消息添加“挥手”图标。您只能使用 CSS 来做到这一点，使用不区分大小写的匹配器来捕获所有可能的变体

查看 CodePen 上的不区分大小写的 CSS 属性匹配，由 CSS-Tricks (@css-tricks) 创建。

组合它们

您可以将属性选择器与其他选择器（如标签、类或 ID）结合使用。

div[attribute="value"] {
  /* style rules here */
}

.module[attribute="value"] {
  /* style rules here */
}

#header[attribute="value"] {
  /* style rules here */
}

或者甚至组合多个属性选择器。此示例选择具有包含“person”词语作为唯一值或以空格分隔列表中的值的 alt 文本的图像，以及包含“lorem”值的 src 值

img[alt~="person"][src*="lorem"] {
  /* style rules here */
}

查看 CodePen 上的组合属性和仅属性选择，由 CSS-Tricks (@css-tricks) 创建。

JavaScript 和 jQuery 中的属性选择器

属性选择器可以在 jQuery 中像任何其他 CSS 选择器一样使用。在 JavaScript 中，您可以使用 document.querySelector() 和 document.querySelectorAll() 使用属性选择器。

查看 CodePen 上的 JS 和 jQuery 中的属性选择器，由 CSS-Tricks (@css-tricks) 创建。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	7+	任何	任何

Lûhn 德鲁伊

# 2012 年 2 月 27 日

关于使用 [rel$=external]，你可以在以“.pdf”结尾的链接上使用它，并在链接末尾添加一个图标。

shahryar

# 2012 年 7 月 22 日

多个属性在所有浏览器中都能正常工作吗？
谢谢

Gumnos

# 2015 年 3 月 8 日

虽然我喜欢这些功能的强大之处，但我经常感到沮丧，因为它们似乎不是动态的

<style>
input[checked]:after {
  content: attr(name);
  background-color: green;
  position: absolute;
  right:0;
}
</style>
<form>
  <ul>
    <li><input type=checkbox name='unchkd'>unchecked</input>
    <li><input type=checkbox name='chkd' checked>checked</input>
  </ul>
</form>

我一直在希望它能根据“checked”属性的切换来更新 CSS。可惜，不能。

Stijn

评论的永久链接# 2017 年 7 月 6 日

input:checked:after{}
你的意思是像这样…

# 2017 年 7 月 7 日

抱歉，“checked”可能不是一个很好的例子，因为:checked就足够了。一个更好的例子可能是下拉列表的.value

<style>
 .optional {
  display: hidden;
 }
 select[value="other"] ~ .optional {
  display: block;
 }
</style>

<p>
Please let us know why you rated us "Excellent"
</p>
<select>
  <option value="service">Great service</option>
  <option value="price">Great price</option>
  <option value="adorable">Adorable puppies!</option>
  <option value="other">Other</option>
</select> 
<label class=optional>Please let us know what other reason
<input type="text">
</label>

据我所知，在纯 CSS 中没有办法根据下拉列表的值或输入框的文本值更改布局。因此，如果我想让我的“其他”文本输入只有在选择“其他”时才显示，目前需要使用 JS。

LordRegent

评论的永久链接# 2017 年 9 月 23 日
输入和选择

我通过让启动 JS 给具有data-value属性的input和select元素添加一个“onchange”处理程序（或“change”事件监听器），该处理程序执行this.dataset.value=this.value（记住使用 .bind(elm) 或工厂函数）。虽然这个解决方案不是纯 CSS，但它只是一个简单的 JS 代码样板，可以让 CSS 在大多数项目中像魔法一样处理依赖显示元素（适应使用你的框架的 selector 函数和迭代器）。
```
$$('input[data-value], select[data-value]').forEach(elm => {
    elm.onchange=(function(){this.dataset.value=this.value}).bind(elm)
    elm.dataset.value=elm.value
})
```
然后，@Gumnos 的帖子的 CSS 只需要一个小的改变，在属性选择器中添加“data-”前缀。
```
<style>
 .optional {
  display: hidden;
 }
 select[data-value="other"] ~ .optional {
  display: block;
 }
</style>
```
关于相关主题…

对于复选框（和单选按钮）解决方案，我在控制元素和目标元素上设置特定的类，并制作 CSS 来处理子元素和后续兄弟元素的元素层次结构。控制类的 CSS 选择器与:checked或:not(:checked)组合使用，根据需要进行。

这个解决方案是纯 CSS，加上元素之间的关系在标记中明确声明，因此设计人员很容易理解和管理。

根据你的项目，你可以将自己限制在几个简单的选择器，比如.controlFollowing:checked和.targetFollowing（前提是将每一组放在一个包装元素中），或者你可以通过使用选择器来进行非常详细的多步控制，例如.controlFollowing1:checked .targetFollowing1和.controlFollowing1:not(:checked) .targetFollowing1，并根据需要扩展数字。我已经构建了一个库文件，在需要此功能时会链接它，但我提醒你不要在项目允许的范围内扩展这个概念。

在实时代码中，大多数时候，一个小的简单样式集就足够了。
```
<style>
.controlFollowing ~ .targetFollowing
,.controlChild > .targetChild
{display: none; }
.controlFollowing:checked ~ .targetFollowing
, .controlChild:checked > .targetChild
{display: initial; }
</style>
```
```
     Toggle? 
         Yes, Virginia...
    


     Toggle, too? 
          Extend? 
            Far out! 
        
    
```

anon-dev

# 2018 年 1 月 10 日

这可以正常工作

:root{
  --optional: hidden;
}

.optional{
  display: var(--optional);
}

select[value="other"] ~ .optional {
   --optional: block;
}

Shafi

# 2015 年 7 月 29 日

谢谢 @Chris，你是‘超人’

Jeremy

# 2015 年 8 月 27 日

我该如何编写这个 CSS？

<option data-hidden="true" value="">[供应商]</option>

我尝试过

option[data-hidden="true"]{color: green;}
option[data-hidden]{color: green;}
option[dataHidden] {color: green;}

但都无济于事。

提前感谢

Stefan

评论的永久链接# 2016 年 1 月 2 日

我遇到了类似的问题。它似乎在元素选择器上不起作用（我尝试过在上使用）。
你可以向你的元素添加一个类，并对该类使用属性选择器。对我来说这是可行的。
Stefan

评论的永久链接# 2016 年 1 月 2 日

我的意思是说我在 <button> 上尝试了！;

siddharth

# 2016 年 2 月 10 日

如何在 CSS 中选择一个列表。请告诉我代码，是像这样，还是应该在 a 的位置使用 li

.nav a{
    diplay:inline;
}

Kevin

# 2016 年 2 月 24 日

如果我想使用 CSS 更改数据属性的值，例如

@media screen and (max-width: 639px) {
    img[align="right"] {
      border: 4px solid pink;
      /* change "right" to "middle" */
    }
}

我知道这可以用 JS 很容易地完成，但纯 CSS 可以做到吗？

Daniel

# 2016 年 7 月 17 日

浏览器是否区分标准 HTML 属性（如 href 或 class）和自定义属性？
我在你的例子中看到你经常使用“data-value”，但我可以在不使用data-*的情况下使用自定义属性，并使用CSS选择它（例如，[tricks=’attr’]{}）？

感谢您的帮助。

Melissa

# 2016年8月19日

有人在iPhone5上遇到过类似这种情况，它忽略/看不到？

[class^=”ad3″]

iPhone6似乎没有问题，但iPhone5忽略了所有相关的样式。

Avinash

# 2016年9月2日

我应该使用哪个软件来学习CSS，请尽快回复我

Philip

# 2017年1月30日

哇！感谢您的解释，经过反复仔细阅读，我能够将其应用于一个复杂的挑战，并且它起作用了。

再次感谢

Gustavo Costa

# 2017年2月7日

如果我想为img[icone]选择多个图标，添加类，它应该是img[icone][class^=”icosv-“]:before吗？

Thor

# 2017年7月1日

哇！我以前怎么没有想到这个，简直太强大方便了！

Ivan

# 2017年10月3日

是否可以以某种方式提取元标签内容？

Edson

# 2019年3月27日

以这个例子为例

…

假设我想选择所有以这些“data”属性开头的DIV。
我开始尝试div[attr^=”data”]，当然没有成功。

有帮助吗？

Chris Coyier

评论永久链接# 2019年3月27日

div[data]

Khaki

# 2019年7月21日

您可以使用:checked选择器。

John Ulric

# 2019年11月21日

想知道|=选择器的相关用例，我了解到它经常用于匹配语言代码，[lang|=”en”]可以匹配“en-US”和“en-UK”。

Ken

# 2020年9月24日

你好！我不理解这篇文章中的第三句话。似乎可能存在语法错误，否则我可能只是没有理解所传达的信息。请审查一下。谢谢

Johan

# 2022年1月19日

如何找到此元素：<p data-title=" ">hello</p>？
使用p[data-title=" "]（不起作用）

七种不同的类型

不区分大小写匹配

组合它们

JavaScript 和 jQuery 中的属性选择器

相关

更多信息

浏览器支持

评论

发表评论 取消回复

发表评论取消回复