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

来源：互联网发布：mac 无线传文件安卓编辑：程序博客网时间：2024/05/22 01:47

一. 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>

运行结果

这里写图片描述

阅读全文

0 0