CSS3属性选择器(CSS3)

最新推荐文章于 2022-05-01 17:28:41 发布

不易撞的网名

最新推荐文章于 2022-05-01 17:28:41 发布

阅读量211

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_50569789/article/details/119671185

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

CSS3属性选择器(CSS3)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3属性选择器</title>
    <style>
        /* 必须是input 但同时具有value 这个属性 即可选择这个元素  用[]进行包含 */
        /*  input[value] {
            color: skyblue;
        } */

        /* 只选择type=text 文本框的input 选取出来 */
        /*    input[type=text] {
            color: gray;
        } */

        /*  选择首先是div 然后是具有class属性 并且属性值 必须是icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }

        section[class$=date] {
            color: blue;
        }

        div.icon1 {
            color: skyblue;
            /*   类选择器和属性选择器 伪类选择器 权重都是10 */
        }
    </style>
</head>

<body>
    <!--  1.利用属性选择器就可以不用借助类或id选择器 -->
    <!--  <input type="text" value="请输入用户名">
    <input type="text"> -->


    <!-- 2.属性选择器还可以选择器属性=值的某些元素 -->
    <!--  <input type="text" name="" id="">
    <input type="password" name="" id=""> -->


    <!--   3.属性选择器可以选择属性值开头的某些元素 -->
    <!--  <div class="ico icon1">小图标1</div>  如果需要对这4个div进行相同的设置，可以使用多类名
    <div class="ico icon2">小图标2</div>
    <div class="ico icon3">小图标3</div>
    <div class="ico icon4">小图标4</div>
    <div>透明人</div> -->

    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>透明人</div>


    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-date">1</section>
    <section class="icon2-date">2</section>
    <section class="icon3-ico">3</section>
</body>

</html>

不易撞的网名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3属性选择器(CSS3)

CSS3属性选择器(CSS3)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫