属性选择器

最新推荐文章于 2022-10-20 13:37:30 发布

杨宗健

最新推荐文章于 2022-10-20 13:37:30 发布

阅读量610

点赞数

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/70031544

版权

CSS新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一种：

[attribute]

作用：根据指定的属性名称找到对应的标签，然后设置属性。

例子：

内容：

<p id="xxx">我是段落1</p>
<p id="xxx">我是段落2</p>
<p id="xxx">我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            p[id]{
                color: red;
            }
        </style>
    </head>
<body>
    <p id="xxx">我是段落1</p>
    <p id="xxx">我是段落2</p>
    <p id="xxx">我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    </div>
</body>
</html>

效果图：

解释：

p[id]{

color:red;

}

意思是：先找到所有的标签，然后再找到所有的标签中含有id属性的标签，将此标签内容改为红色。

第二种：

[attribute=value]

作用：找到有指定属性的，并且属性的取值等于value的标签，然后设置属性。

例子：

内容：

<p id="xxx">我是段落1</p>
<p id="xxx" class="xxxx">我是段落2</p>
<p id="xxx" class="xxxx">我是段落3</p>
<p class="xxxx">我是段落4</p>
<p class="pare">我是段落5</p>

代码；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            p[class=xxxx]{
                color: red;
            }
        </style>
    </head>
<body>
    <p id="xxx">我是段落1</p>
    <p id="xxx" class="xxxx">我是段落2</p>
    <p id="xxx" class="xxxx">我是段落3</p>
    <p class="xxxx">我是段落4</p>
    <p class="pare">我是段落5</p>
    </div>
</body>
</html>

效果图：

解释：

p[class=xxxx]{

color:red;

}

意思是：先找到所有的标签，然后再从这些标签中找到含有class属性的标签，然后再从这些含有class属性的标签中找到class属性的值等于xxxx的标签，将此标签的内容改为红色。

综上：也就是说最后找到的标签是：含有class属性，而且class属性的值等于xxxx的标签。

最常见的应用场景：就是用于区分input属性。

区分的内容：

<input type="checkbox" id="">
<input type="button" id="">
<input type="radio" id="">
<input type="password" id="">
<input type="text" id="">

区分的方法：

input[type=password/text/radio/button/checkbox]{}

这样就通过input的type属性的值，找到相应的input标签。

第三种：

一、属性的取值是以什么开头的：

1、[attribute|=value] 属于CSS2

内容:

<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            img[alt|=abc]{
                color: red;
            }
        </style>
    </head>
<body>
    <img src="" alt="abcdef">
    <img src="" alt="abc-www">
    <img src="" alt="abc ppp">
    <img src="" alt="defabc">
    <img src="" alt="ppp abc">
    <img src="" alt="www-abc">
    <img src="" alt="qq">
    <img src="" alt="yy">
</body>
</html>

效果图：

2、[attribute^=value] 属于CSS3

内容：

<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            img[alt^=abc]{
                color: red;
            }
        </style>
    </head>
<body>
    <img src="" alt="abcdef">
    <img src="" alt="abc-www">
    <img src="" alt="abc ppp">
    <img src="" alt="defabc">
    <img src="" alt="ppp abc">
    <img src="" alt="www-abc">
    <img src="" alt="qq">
    <img src="" alt="yy">
</body>
</html>

效果图：

*对比上面两个CSS2和CSS3中的效果图，总结出这两者的不同之处：
CSS2中的只能找到value开头的，并且value是被 - 和其他内容隔开的。

CSS3中的只要是以value开头的都可以找到，无论有没有被 - 隔开。

二、属性的取值是以什么结尾的：

1、[attribute$=value] 属于CSS3

内容：

<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            img[alt$=abc]{
                color: red;
            }
        </style>
    </head>
<body>
    <img src="" alt="abcdef">
    <img src="" alt="abc-www">
    <img src="" alt="abc ppp">
    <img src="" alt="defabc">
    <img src="" alt="ppp abc">
    <img src="" alt="www-abc">
    <img src="" alt="qq">
    <img src="" alt="yy">
</body>
</html>

效果图：

三、属性的取值是否包含某个特定的值：

abc可以写到任意的位置，如：wabcwwmmm,wwabcwmmm,wwwabcmmm,wwwmabcmm,

wwwmmabcm,wwwmmmabc，wwabcw-mmm,www-mabcmm等等，因为这些情况都叫做包

含abc这个特定的值。

1、[attribute~=value] 属于CSS2

内容：

<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            img[alt~=abc]{
                color: red;
            }
        </style>
    </head>
<body>

<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">
</body>
</html>

效果图：

2、[attribute*=value] 属于CSS3

内容：

<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <base target="_self">
        <style>
            img[alt*=abc]{
                color: red;
            }
        </style>
    </head>
<body>

<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">
</body>
</html>