HTML5中CSS3的属性选择器

最新推荐文章于 2024-07-14 03:14:21 发布

枕梦

最新推荐文章于 2024-07-14 03:14:21 发布

阅读量3.3k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_37768482/article/details/71480663

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS3属性选择器：
E[att] (选择具有att属性的E元素。 )
E[att="val"] (选择具有att属性且属性值等于val的E元素。 )
E[att^="val"] (选择具有att属性且属性值为以val开头的字符串的E元素。 )
E[att$="val"] (选择具有att属性且属性值为以val结尾的字符串的E元素。 )
E[att*="val"] (选择具有att属性且属性值为包含val的字符串的E元素。 )
E[att~="val"] (选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 )

E[att|="val"] (选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。有多个时，没有效果 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*1.img[alt="234"]{
            margin: 20px;
        }*/
        /*2.img[alt^="2"]{!*以2开头*!
            margin: 20px;
        }*/
        /*img[alt$="3"]{!*以3结尾*!
            margin: 20px;
        }*/
        /*img[alt*="3"]{!*全部属性有3的*!
            margin: 20px;
        }*/
        img[alt~="123"]{/*以3结尾*/
            margin: 20px;
        }

        .divHeight{
            height: 200px;
        }
        .divWidth{
            width: 200px;
        }
        .divBg{
            background-color: red;
        }
        .divBg2{
            background-color: yellow;
        }
    </style>
    <title>属性选择器</title>
</head>
<body>

<img src="../../img/11.jpg" alt="123">
<img src="../../img/11.jpg" alt="234">

<div class="divHeight divWidth divBg">

</div>
<div class="divWidth divHeight divBg2">

</div>
<div class="a-div">
    1
</div>
<div class="b-div">
    2
</div>
<div class="c-div">
    3
</div>

</body>
</html>