📌  相关文章
📜  CSS | [属性$=值] 选择器(1)

📅  最后修改于: 2023-12-03 15:00:06.166000             🧑  作者: Mango

CSS | [属性$=值] 选择器
简介

CSS中的选择器用于选择需要应用样式的元素，其中，[属性$=值] 选择器是一个能够匹配指定属性以某个值结尾的元素的选择器。

语法
[属性$=值] {
  样式规则 
}

其中，“属性”是需要选择的属性名称，“值”是需要选择的属性值的结尾（即以该值结尾）。

示例

下面是一个例子，其中用 [attr$=value] 选择器选择了所有 title 属性以 "s" 结尾的元素，并为这些元素应用了背景色：

<!DOCTYPE html>
<html>
<head>
  <style>
    [title$=s] {
      background-color: yellow;
    }
  </style>
</head>
<body>

<h1 title="Lions">African Animals</h1>
<p title="Zebras">Zebras are several species of African equids</p>
<p title="Dolphins">Dolphins are a widely distributed and diverse group of aquatic mammals</p>
<p title="Giraffes">Giraffes are a genus of African even-toed ungulate mammals</p>

</body>
</html>
实战应用

在实际项目中，可以使用 [attr$=value] 选择器来匹配文件类型后缀、链接 target 属性等以指定值结尾的属性，从而实现所需的样式。

例如，可以使用以下代码为所有链接 target 属性为 _blank 和 _new 的链接添加图标：

<!DOCTYPE html>
<html>
<head>
  <style>
    a[target$=_blank], a[target$=_new] {
      background-image: url('external-link.png');
      padding-left: 20px;
      background-repeat: no-repeat;
      background-position: left center;
    }
  </style>
</head>
<body>

<a href="#" target="_blank">New page</a>
<a href="#" target="_self">Same page</a>
<a href="#" target="_new">New window</a>

</body>
</html>
总结

[属性$=值] 选择器是一个好用的 CSS 选择器，它能够帮助我们选择指定属性以某个值结尾的元素，并为这些元素应用指定的样式。在实际项目中，可以充分利用这个选择器，实现所需的样式效果。