属性选择器

最新推荐文章于 2024-05-24 00:34:26 发布

ztt0918

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量310

点赞数

分类专栏：属性选择器文章标签：属性选择器

本文链接：https://blog.csdn.net/ztt0918/article/details/71897451

版权

属性选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*找到所有具有alt属性的标签*/
        img[alt]{
            margin: 20px;
        }
        /*找到所有具有alt=123属性的img标签*/
        img[alt="123"]{
            margin: 20px;
        }
        /*找到所有具有alt属性以1开头的img标签*/
        img[alt^="1"]{
            margin: 20px;
        }
        /*找到所有具有alt属性以3结尾的img标签*/
        img[alt$="3"]{
            margin: 20px;
        }
        /*找到所有具有alt属性包含3的img标签*/
        img[alt*="3"]{
            margin: 20px;
        }
        /*选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val元素（包含只有一个值且该值等于val的情况） */
        div[class~="c"]{
            height: 50px;
            background-color: antiquewhite;
            border: 1px solid red;
        }
        /*选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。*/
        div[class|="b"]{
            height: 50px;
            background-color: antiquewhite;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<img src="../img/1.PNG" alt=""/>
<img src="../img/1.PNG" />
<img src="../img/1.PNG" alt="123"/>
<img src="../img/1.PNG" alt="234"/>
<div class="a c"></div>
<div class="b c"></div>
<div class="b-c"></div>
<div class="b-c"></div>
</body>
</html>

ztt0918

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
属性选择器

html>html lang="en">head> meta charset="UTF-8"> title>属性选择器title> style> /*找到所有具有alt属性的标签*/ img[alt]{ margin: 20px; } /*找到所有具有alt=123属性的img标签*
复制链接

扫一扫

专栏目录