码农教程 - 一技在手,衣食无忧! tools

目录

CSS 属性选择器

❮ 上一节 下一节 ❯

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

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

CSS [属性] 选择器

这个[attribute]选择器用于选择具有指定属性的元素。

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

示例

a[target] {
  background-color: yellow;
}
亲自试一试 »

CSS [属性="value"] 选择器

这个[attribute="value"]选择器用于选择具有指定属性和值的元素。

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

示例

a[target="_blank"] {
  background-color: yellow;
}
亲自试一试 »

CSS [属性~="value"] 选择器

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

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

示例

[title~="flower"] {
  border: 5px solid yellow;
}
亲自试一试 »

上面的示例将匹配 title="flower"、title="summer flower" 和 title="flower new" 的元素，但不匹配 title="my-flower" 或 title="flowers"。

CSS [属性|="value"] 选择器

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

笔记：该值必须是整个单词，可以单独使用，例如 class="top"，也可以后跟连字符 ( - )，例如 class="top-text"。

示例

[class|="top"] {
  background: yellow;
}
亲自试一试 »

CSS [属性^="value"] 选择器

这个[attribute^="value"]选择器用于选择具有指定属性的元素，其值以指定值开头。

以下示例选择类属性值以 "top" 开头的所有元素：

笔记：该值不必是整个单词！

示例

[class^="top"] {
  background: yellow;
}
亲自试一试 »

CSS [属性$="value"] 选择器

这个[attribute$="value"]选择器用于选择属性值以指定值结尾的元素。

以下示例选择类属性值以 "test" 结尾的所有元素：

笔记：该值不必是整个单词！

示例

[class$="test"] {
  background: yellow;
}
亲自试一试 »

CSS [属性*="value"] 选择器

这个[attribute*="value"]选择器用于选择属性值包含指定值的元素。

以下示例选择类属性值包含 "te" 的所有元素：

笔记：该值不必是整个单词！

示例

[class*="te"] {
  background: yellow;
}
亲自试一试 »

样式表单

属性选择器对于没有类或 ID 的表单样式很有用：

示例

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 设置表单样式的更多示例。

通过练习测试一下

练习:

对于具有 a 的 <a> 元素，将背景颜色设置为 "red"target属性。

<style>
 {
  background-color: red;
}
</style>

<body>
  <a href="https://91xjr.com">91xjr.com</a>
  <a href="http://disney.com" target="_blank">Disney.com</a>
  <a href="http://wikipedia.org" target="_top">wikipedia.org</a>
</body>

开始练习

所有 CSS 属性选择器

Selector Example Example description
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target="_blank"] Selects all elements with target="_blank"
[attribute~=value] [title~="flower"] Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"
[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects all <a> elements with a href attribute value starting with "https"
[attribute$=value] a[href$=".pdf"] Selects all <a> elements with a href attribute value ending with ".pdf"
[attribute*=value] a[href*="91xjr"] Selects all <a> elements with a href attribute value containing the substring "91xjr"

❮ 上一节 下一节 ❯