CSS属性选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46708745/article/details/108022607

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

只要有这个元素的属行便满足。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>LH的代码</title>
    <style>
        [class="Y"]{
            background-color: red;
        }
    </style>
</head>
<body>
   <p>带有 Y 属性的会得到<span class="Y">红色</span>背景：</p>
</body>
</html>

在这里插入图片描述

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。

不能带有连字符 - ；不分开头结尾；
必须是完整的,如Y,不能是YL;(Y“ 空格 ” L)，这是两个值

<!DOCTYPE html>
<html>
<head>
   
    <title>LH的代码</title>
    <style>
        [class~="Y"] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>带有 Y 属性的会得到<span class="Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L-Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="LY ">红色</span>背景：</p>
</body>
</html>

在这里插入图片描述

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

value值必须在第一位；并且可以有连字符;
空格不可以满足；

<!DOCTYPE html>
<html>
<head>
   
    <title>LH的代码</title>
    <style>
        [class|="Y"] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>带有 Y 属性的会得到<span class="Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y-L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L-Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="LY ">红色</span>背景：</p>
</body>
</html>

在这里插入图片描述

[attribute^=value] 选择器匹配属性值中且以value开头的元素

只要包含value就行；有无空格都行；
必须在开头；有连字符也可以;

<!DOCTYPE html>
<html>
<head>
   
    <title>LH的代码</title>
    <style>
        [class^="Y"] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>带有 Y 属性的会得到<span class="Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y-L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L-Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="LY ">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="YL ">红色</span>背景：</p>
</body>
</html>

在这里插入图片描述

[attribute$=value] 选择器用于选取属性值中且以value结尾的元素。
只要以value结尾；有无空格都行；有连字符也行；

<!DOCTYPE html>
<html>
<head>
   
    <title>LH的代码</title>
    <style>
        [class$="Y"] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>带有 Y 属性的会得到<span class="Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y-L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L-Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="LY">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="YL">红色</span>背景：</p>
</body>
</html>

在这里插入图片描述

[attribute*=value] 选择器匹配属性值包含指定值的每个元素。

有无空格都行；不分开头结尾；有连字符也可以；有value就行。

<!DOCTYPE html>
<html>
<head>
   
    <title>LH的代码</title>
    <style>
        [class *="Y"] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>带有 Y 属性的会得到<span class="Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="Y-L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L-Y">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="L">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="LY">红色</span>背景：</p>
    <p>带有 Y 属性的会得到<span class="YL">红色</span>背景：</p>
</body>
</html>

在这里插入图片描述