您的位置：首页 > Web前端 > CSS

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

2017-07-09 11:51 761 查看

一. 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中选择器示例
4000
</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>

运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 属性选择器

相关文章推荐

新的分享

章节导航