＜css3-新增样式选择器＞

最新推荐文章于 2023-01-06 23:50:25 发布

好先生·

最新推荐文章于 2023-01-06 23:50:25 发布

阅读量649

点赞数

分类专栏： css css3 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_45540964/article/details/109614031

版权

css 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

css3

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 全部匹配 */
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        img {
            width: 200px;
            height: 200px;
            border: 5px solid green;
        }
        /*匹配属性存在的 最后一个不会被匹配到*/
        img[alt] {
            border: 5px solid red;
        }
        /*匹配属性值存在的最后一个会被匹配*/
        img[class] {
            border: 1px solid #000;
        }
        /*精确匹配 alt为hello的都会被匹配到*/
        img[alt="hello"] {
            border: 5px solid pink;
        }
    </style>
</head>
<body>
    <img src="/Users/macbookair/Desktop/picture/0.jpg" alt="hello">
    <img src="/Users/macbookair/Desktop/picture/1.jpg" alt="ickt">
    <img src="/Users/macbookair/Desktop/picture/2.jpg" alt="hello">
    <img src="/Users/macbookair/Desktop/picture/3.jpg" class="">
    <hr>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 4px solid pink;
            margin: 10px;
            float: left;
            font-size: 15px;
            overflow: hidden;
        }
        /*匹配确定属性值
        */
        div[class="hello"] {
            border: 5px solid red;
        }


        /*匹配class的值是以hello开头的
            1和6被选中
            匹配hello或者hello-开头的
        */
        div[class|="hello"] {
            background: skyblue;
        }

        /*匹配包含hello
            1 2 3被选中
            hello必须单独存在(空格隔开)
        */
        div[class~="hello"] {
            background: orange;
        }

        /*匹配hello开头的
        1 2 4 6 8
        凡是开头有hello的，不管后面是什么都会被选中
        */
       div[class^="hello"] {
        background: red;
       }

       /*匹配以hello结尾
        1 3 5 7 9
        凡是结尾有hello的,不管前面是什么都会被选中
       */
       div[class$="hello"] {
        background: blue;
       }

       /*包含hello的
        全部都有
       */
       div[class*="hello"] {
        background: purple;
       }

       /*选取属性值*/
       div[ick="heslay"] {
        border: 5px solid #000;
       }
       /*选取多个属性值*/
       div[class*="hello"][ick="heslay"] {
        background: brown;
       }

    </style>
    <div i=1 class="hello" ick="heslay">hello</div>
    <div i=2 class="hello ickt">hello ickt</div>
    <div i=3 class="ickt hello">ickt hello</div>
    <div i=4 class="helloickt">helloickt</div>
    <div i=5 class="ickthello">ickthello</div>
    <div i=6 class="hello-ickt">hello-ickt</div>
    <div i=7 class="ickt-hello">ickt-hello</div>
    <div i=8 class="hello_ickt">hello_ickt</div>
    <div i=9 class="ickt_hello">ickt_hello</div>
</body>
</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜css3-新增样式选择器＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> /.
复制链接

扫一扫