二维码
搜索 ×

CSS 属性选择器

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 属性选择器

使用特定属性设置 HTML 元素的样式

可以设置具有特定属性或属性值的HTML元素的样式。

CSS [属性] 选择器

[attribute]: 选择器用于选择具有指定属性的选择器。

以下示例选择所有具有target属性的 <a> 元素：

1
a[target] {  background-color: yellow;}

CSS [attribute=“value”] 选择器

[attribute="value"]：选择器用于选择具有指定属性和值。

以下示例选择所有具有 target=“_blank” 属性的<a>元素：

1
a[target="_blank"] {  background-color: yellow;}

CSS [attribute~=“value”] 选择器

[attribute~="value"]：选择器用于选择具有属性的元素，包含指定单词的值。

以下示例选择具有 title 属性的所有元素 包含一个以空格分隔的单词列表，其中一个是“flower”：

1
[title~="flower"] {  border: 5px solid yellow;}

上面的示例将匹配 title=“flower”， title=“summer flower“ 和 title=”flower new“，但不是 title=”my-flower“ 或 title=”flowers”。

CSS [attribute|=“value”] 选择器

选择器用于选择具有指定属性的元素，其值可以是指定值，或后跟连字符 （-） 的指定值。[attribute|="value"]

注意： 该值必须是一个完整的单词，或者单独使用，例如 class=“top”，或后跟连字符（ - ），如 class=“top-text”。

1
[class|="top"] {  background: yellow;}

CSS [attribute^=“value”] 选择器

[attribute^="value"]：选择器用于选择具有指定属性的元素，其值为指定的值。

以下示例选择类属性值以“top”开头：

注意： 值不必是一个完整的单词！

1
[class^="top"] {  background: yellow;}

CSS [attribute$=“value”] 选择器

[attribute$="value"]：选择器用于选择其属性 value 以指定值结尾。

以下示例选择类属性值为 以“test”结尾：

**注意：**值不必是一个完整的单词！

1
[class$="test"] {  background: yellow;}

CSS [attribute*=“value”] 选择器

[attribute*="value"]：选择器用于选择其属性 value 包含指定的值。

以下示例选择类属性值为 包含“te”：

注意： 值不必是一个完整的单词！

1
[class*="te"] {  background: yellow;}

样式表单

属性选择器可用于设置没有类或ID的表单样式：

1
2
3
4
5
6
7
8
input[type="text"] {  width: 150px;  
  display: block;  
  margin-bottom: 10px;  
  background-color: yellow;}  

input[type="button"] {  width: 120px;  
  margin-left: 35px;  
  display: block;}

提示： 请访问我们的CSS表单教程，了解有关如何使用CSS设置表单样式的更多示例。

所有 CSS 属性选择器

选择器 示例 说明
[attribute] [target] 选择具有目标属性的所有元素
[attribute=value] [target=“_blank”] 选择 target=“_blank” 的所有元素
[attribute~=value] [title~=“flower”] 选择具有 title 属性的所有元素，该属性包含以空格分隔的单词列表，其中一个是“flower”
[attribute|=value] [lang|=“en”] 选择 lang 属性值以“en”开头的所有元素
[attribute^=value] a[href^=“https”] 选择 <a>href 属性值以“https”开头的所有 ‘’ 元素
[attribute$=value] a[href$=“.pdf”] 选择 <a>href 属性值以“.pdf”结尾的所有 ‘’ 元素
[attribute*=value] a[href*=“w3schools”] 选择具有包含<a>子字符串的 href 属性值的所有元素

推荐教程