首页 > 代码库 > H5 21-属性选择器下

H5 21-属性选择器下

2024-09-05 21:27:37   217人阅读

21-属性选择器下

<style>img[alt~="abc"] { color: red }</style>

 

技术分享 技术分享 技术分享 技术分享 技术分享 技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-属性选择器下</title>
    <style>
        /*
        img[alt^=abc]{
            color: red;
        }
        */
        /*
        img[alt|=abc]{
            color: red;
        }
        img[alt$=abc]{
            color: blue;
        }
        */
        /*
        img[alt*=abc]{
            color: red;
        }
        */
        img[alt~=abc]{
            color: red;
        }
    </style>
</head>
<body>
<!--
1.属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的
[attribute$=value] CSS3

3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
-->

<!--
<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">
-->

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

</body>
</html>

 

H5 21-属性选择器下


联系
我们