CSS 属性选择器，请在本文中了解它们

terry 2年前 (2023-09-28) 阅读数 199 #数据结构与算法

属性选择器为具有某些属性的 HTML 元素设置样式。您可以格式化具有指定属性的 HTML 元素，而不仅仅是 class 和 id 属性。

1。了解属性选择器

CSS 属性选择器提供了一种简单而强大的方法，可以根据特定属性或属性值的存在将样式应用到 HTML 元素。

您可以通过将属性（使用值选择后）括在方括号中来创建属性选择器。您还可以在其前面放置一个 [元素类型选择器。

2。 CSS [属性] 选择器

这是属性选择器最简单的形式，如果给定的属性存在，它将样式规则应用于元素。例如，您可以使用以下样式规则设置具有 title 属性的所有元素的样式：

示例

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS 属性选择器示例</title>        <style>            [title] {                color: blue;            }</style>    </head>    <body style="background-color: aqua;">        <h1 title="heading">属性选择器</ h1>
            <p title="paragraph">此段落的颜色将为蓝色。</ p>    </body></html>

[title] 上例中的选择器匹配具有 title 属性的所有元素。

还可以通过将属性选择器设置为元素类型选择器来限制对特定 HTML 元素的选择。

示例

<style>    abbr[title] {        color: red;}</style>

abbr[title] 选择器仅匹配具有 title 属性的元素，因此它匹配缩写，但不匹配具有 title 属性的 anchor 元素。

1。 CSS 选择器 [attribute="value"]

您可以使用 = 运算符使属性选择器匹配任何属性值与给定值完全相同的元素：

示例

<style>    input[type="text"] {        border:1px solid red;    }    input[type="submit"] {        border:1px solid green;    }</style>

分析：上例中的选择器匹配[input]所有type属性值等于submit的元素。

2。 CSS [attribute~="value"] 选择器

使用 ~= 运算符，您可以创建一个属性选择器，属性值之间用空格值（例如 class="warning"）分隔，一其中等于给定值：

示例

<style>    [class~="warning"] {        color: #fff;        background: red;    }</style>

此选择器匹配任何具有 class 属性的 HTML 元素，该属性包含由空格分隔的值，其中之一是警告。例如，它匹配具有警告、警告警告等类值的元素。

3。 CSS 选择器 [attribute |="value"]

您可以使用 |= 运算符创建属性选择器，其中包含连字符分隔的值列表 连字符分隔的值列表，以指定值。匹配任何元素：

示例

<style>    p[lang|=en] {        color: #fff;        background: blue;    }</style>

解析：

上例中的选择器会匹配具有 lang 属性且包含以 1 开头的值的所有元素，无论其后跟什么值 Z 或不带连字符和更多字符。换句话说，它的元素匹配属性值为 en、en-US、en-GB 等的语言，但不匹配 US-en、GB-en。

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

您可以使用 ^= 运算符使属性选择器与属性值 任何以 开头并指定值 的元素匹配。它不必是一个完整的单词。

示例

<style>            a[href^="http://"] {                background:url(img/border.png) 100% 50% no-repeat;                padding-right: 15px;            }</style>

上例中的选择器将查找所有外部链接并添加一个小图标以指示它们将在新选项卡或窗口中打开。

***5。 CSS 选择器 [attribute *="value"]***

可以使用 *= 运算符使属性选择器匹配所有属性值包含指定值的元素。

示例

<style>    [class*="warning"] {        color: #fff;        background: red;    }</style>

注意：

上例中的此选择器与类值警告中包含的属性的所有 HTML 元素相匹配。

例如是否匹配class warning、alert warning、alert-warning或alert_warning等值的元素？ CSS属性选择器，了解属性选择器的含义，并通过示例详细解释一些常见属性。最后，我们通过一个较小的项目——程式化的形式加深了我们的理解。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：CSS 基础知识简介：边框和圆角下一篇：CSS 选择器有一个使用策略

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。