影刀RPA开发-CSS选择器介绍-3. 属性选择器

时间：2025-05-14 12:11:22

3.1 简单属性选择器

简单属性选择器通过元素的属性名来选择页面上的元素，不考虑属性值。它能够选择所有具有指定属性的元素，无论属性值是什么。

  • 选择方式：使用[属性名]作为选择器。例如，[title] { color: orange; } 会选择页面上所有具有title属性的元素，并将它们的文字颜色设置为橙色。
  • 应用场景：适用于对具有特定属性的元素进行统一的样式设置。比如，为页面上所有带有title属性的元素设置提示文字的样式：
    <a href="https://example.com" title="访问示例网站">示例链接</a>
<img src="image.jpg" title="示例图片" alt="示例图片">

    [title] { color: orange; }
    这样，所有带有title属性的元素的文字颜色都会变为橙色。
  • 优先级：简单属性选择器的优先级与类选择器相同，高于元素选择器，低于ID选择器。如果一个元素同时被元素选择器、简单属性选择器和类选择器选中，类选择器或简单属性选择器的样式会覆盖元素选择器的样式。例如：
    p { color: green; }
[title] { color: red; }
    对于<p title="示例段落">，文字颜色将是红色。

3.2 属性值选择器

属性值选择器不仅根据属性名选择元素，还会根据属性值进行更精确的选择。它有多种匹配方式，可以根据属性值的精确值、部分值或模式进行选择。

  • 精确值选择器：使用[属性名="属性值"]来选择属性值完全匹配的元素。例如，[type="text"] { width: 200px; } 会选择页面上所有type="text"的<input>元素，并将它们的宽度设置为200像素。

    <input type="text" name="username">
<input type="password" name="password">

    [type="text"] { width: 200px; }

    这样，所有type="text"的输入框宽度都会被设置为200像素。

  • 包含值选择器：使用[属性名~="属性值"]来选择属性值中包含指定单词的元素。属性值被视为由空格分隔的单词列表。例如，[class~="highlight"] { background-color: yellow; } 会选择所有class属性值中包含highlight单词的元素，并将它们的背景颜色设置为黄色。

    <div class="highlight important">这是一个重要段落。</div>
<p class="highlight">这是一个普通段落。</p>

    [class~="highlight"] { background-color: yellow; }

    这样，所有class属性值中包含highlight的元素都会应用黄色背景。

  • 开始值选择器：使用[属性名^="属性值"]来选择属性值以指定字符串开头的元素。例如，[href^="https"] { color: blue; } 会选择所有href属性值以https开头的链接，并将它们的文字颜色设置为蓝色。

    <a href="https://example.com">示例链接</a>
<a href="http://example.com">另一个链接</a>

    [href^="https"] { color: blue; }

    这样，所有以https开头的链接文字颜色都会变为蓝色。

  • 结束值选择器：使用[属性名$="属性值"]来选择属性值以指定字符串结尾的元素。例如，[href$=".pdf"] { color: green; } 会选择所有href属性值以.pdf结尾的链接，并将它们的文字颜色设置为绿色。

    <a href="document.pdf">PDF文档</a>
<a href="image.jpg">图片链接</a>

    [href$=".pdf"] { color: green; }

    这样，所有以.pdf结尾的链接文字颜色都会变为绿色。

  • 包含值选择器：使用[属性名*="属性值"]来选择属性值中包含指定字符串的元素。例如，[href*="example"] { color: purple; } 会选择所有href属性值中包含example字符串的链接，并将它们的文字颜色设置为紫色。

    <a href="https://example.com">示例链接</a>
<a href="http://anotherexample.com">另一个链接</a>

    [href*="example"] { color: purple; }

    这样，所有href属性值中包含example的链接文字颜色都会变为紫色。

属性值选择器的优先级与简单属性选择器相同，高于元素选择器，低于ID选择器。它们能够根据属性值的精确匹配或模式匹配来选择元素，提供了更灵活的样式控制方式。

相关文章