CSS3的新增选择器示例-属性选择器

最新推荐文章于 2023-04-04 19:09:23 发布

net_chengsheng

最新推荐文章于 2023-04-04 19:09:23 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_29548433/article/details/74852897

版权

css3选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. CSS3概述

css3是css2的升级版本，新增了许多特性，弥补了css2的众多不足之处。

css3许多查找元素的方法，极大的提高了查找元素的效率和精准度。

css3目前在市场上，对pc端的支持很差，有些需要添加私有前缀

但在移动端的支持要优于pc端

二. 选择器

1. 属性选择器

css3中对属性选择器元素元素的查找提供了五种形式

1.1 E[attr] 表示存在attr属性即可找到

<!DOCTYPE html>
<html>
<head>
    <title>css3中选择器示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*③ 通过属性选择器来给有name属性的元素设置样式*/
        div[name] {
            width: 300px;
            height: 300px;
            margin: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <!--①创建div标签，并设置name属性，值为空-->
    <div name=""> </div>
    <!--②创建第二个div标签，没有设置name属性-->
    <div></div>
</body>
</html>

运行结果
这里写图片描述

1.2 E[attr=val]表示属性值完全等于val

<!DOCTYPE html>
<html>
<head>
    <title>css3中选择器示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*③ 通过标签选择器先给所有的div标签，设置宽高，和默认颜色黑色*/
        div {
            width: 300px;
            height: 100px;
            background-color: black;
            margin-top: 10px;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /*④ 给标签：div，属性：class，值为box的元素设置样式, 背景颜色设置为红色*/
        div[class='box'] {
            background-color: red;
        }
    </style>
</head>
<body>
    <!--①创建div标签，并设置class属性，值为box-->
    <div class="box">盒子1</div>
    <!--②创建第二个div标签，同样设置class属性，值为空-->
    <div class="">黑子2</div>
    <div class="box2">黑子3</div>
</body>
</html>

运行效果
这里写图片描述

1.3 E[attr=val] 表示的属性值里包含 val 字符并且在’任意’位置*

<!DOCTYPE html>
<html>
<head>
    <title>css3中选择器示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*③ 通过标签选择器先给所有的div标签，设置宽高，和默认颜色黑色*/
        div {
            width: 300px;
            height: 100px;
            background-color: black;
            margin-top: 10px;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /*④ 给标签：div，属性：class，值包含box的元素设置如下样式*/
        div[class*='box'] {
            background-color: red;
        }
    </style>
</head>
<body>
    <!--①创建div标签，并设置class属性，值为box-->
    <div class="box">盒子1</div>
    <!--②创建第二个div标签，同样设置class属性，值为空-->
    <div class="">黑子2</div>
    <div class="box2">黑子3</div>
    <div class="bo">黑子4</div>
</body>
</html>

运行结果
这里写图片描述

1.4 E[attr^=val] 表示的属性值里包含以 val 字符开始的元素

<!DOCTYPE html>
<html>
<head>
    <title>css3中选择器示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*③ 通过标签选择器先给所有的div标签，设置宽高，和默认颜色黑色*/
        div {
            width: 300px;
            height: 100px;
            background-color: black;
            margin-top: 10px;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /*④ 给标签：div，属性：class，值是以box开头的元素设置如下样式*/
        div[class^='box'] {
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="box">盒子1</div>
    <div class="abox">黑子2</div>
    <div class="box2">黑子3</div>
    <div class="cccbox">黑子4</div>
</body>
</html>

运行结果
这里写图片描述

1.5 E[attr$=val] 表示的属性值里包含以 val 字符结尾的元素

<!DOCTYPE html>
<html>
<head>
    <title>css3中选择器示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*③ 通过标签选择器先给所有的div标签，设置宽高，和默认颜色黑色*/
        div {
            width: 300px;
            height: 100px;
            background-color: black;
            margin-top: 10px;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /*④ 给标签：div，属性：class，值是以box结尾的元素设置如下样式*/
        div[class$='box'] {
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="box">盒子1</div>
    <div class="abox">黑子2</div>
    <div class="box2">黑子3</div>
    <div class="cccbox">黑子4</div>
</body>
</html>

运行结果

这里写图片描述

net_chengsheng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3的新增选择器示例-属性选择器

一. CSS3概述css3是css2的升级版本，新增了许多特性，弥补了css2的众多不足之处。css3许多查找元素的方法，极大的提高了查找元素的效率和精准度。css3目前在市场上，对pc端的支持很差，有些需要添加私有前缀但在移动端的支持要优于pc端二. 选择器1. 属性选择器 css3中对属性选择器元素元素的查找提供了五种形式1.1 E[attr] 表示存在attr属性即可找到<!DOCT
复制链接

扫一扫