CSS 2 CSS 选择器 - 2 2.5 属性选择器

news2024/11/20 2:35:29

CSS

文章目录

- - CSS
  - 2 CSS 选择器 - 2
  - - 2.5 属性选择器
    - - 2.5.1 CSS [attribute] 选择器
      - 2.5.2 CSS [attribute="value"] 选择器
      - 2.5.3 CSS [attribute~="value"] 选择器
      - 2.5.4 CSS [attribute|="value"] 选择器
      - 2.5.5 CSS [attribute^="value"] 选择器
      - 2.5.6 CSS [attribute$="value"] 选择器
      - 2.5.7 CSS [attribute*="value"] 选择器
      - 2.5.8 所有 CSS 属性选择器

2 CSS 选择器 - 2

2.5 属性选择器

为带有特定属性的 HTML 元素设置样式

2.5.1 CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

【举个栗子】

下例选择所有带有 target 属性的 <a> 元素；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        a[target] {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h1>CSS [attribute] 选择器</h1>

<p>带有 target 属性的链接获得颜色背景：</p>

<a href="https://www.w3school.com">w3school.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

浏览器渲染

在这里插入图片描述

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

[attribute=“value”] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target=“_blank” 属性的 <a> 元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        a[target=_blank] {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h1>CSS [attribute="value"] 选择器</h1>
<p>target="_blank" 的链接会有黄色背景：</p>

<a href="https://www.w3school.com.cn">w3school.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

浏览器渲染

在这里插入图片描述

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

[attribute~=“value”] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 “flower” 单词的所有元素：

【举个栗子】

<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
  border: 5px solid yellow;
}
</style>
</head>
<body>

<h1>CSS [attribute~="value"] 选择器</h1>
<p>title 属性包含 "flower" 的所有图像会有黄色边框。</p>

<img src="/i/photo/klematis.jpg" title="klematis flower" width="150" height="113">
<img src="/i/photo/flower.gif" title="flower" width="224" height="162">
<img src="/i/photo/tree.png" title="tree" width="200" height="358">

</body>
</html>

浏览器渲染

在这里插入图片描述

上面的例子会匹配以下属性的元素：title=“flower”、title=“summer flower” 以及 title=“flower new”，但不匹配：title=“my-flower” 或 title=“flowers”。【一个完整的单词】

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

[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 “top” 开头的所有元素：

**注释：**值必须是完整或单独的单词，比如 class=“top” 或者后跟连字符的，比如 class=“top-text”。

【举个栗子】

在这里插入图片描述

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

[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 “top” 开头的所有元素：

这里值就不必是完整单词

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        [class^="top"] {
            background: yellow;
        }
    </style>
</head>
<body>

<h1>CSS [attribute^="value"] 选择器</h1>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

浏览器渲染

在这里插入图片描述

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

[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 “test” 结尾的所有元素：

这里的值也不必是完整单词

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        [class$="test"] {
            background: yellow;
        }
    </style>
</head>
<body>

<h1>CSS [attribute$="value"] 选择器</h1>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

在这里插入图片描述

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

[attribute*=“value”] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 “te” 的所有元素：

这里的值也不必是完整单词

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        [class*="te"] {
            background: yellow;
        }
    </style>
</head>
<body>

<h1>CSS [attribute*="value"] 选择器</h1>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>