CSS3的新增選擇器示例-屬性選擇器
阿新 • • 發佈：2018-12-25
一. CSS3概述
css3是css2的升級版本，新增了許多特性，彌補了css2的眾多不足之處。
css3許多查詢元素的方法，極大的提高了查詢元素的效率和精準度。
css3目前在市場上，對pc端的支援很差，有些需要新增私有字首
但在移動端的支援要優於pc端
二. 選擇器
1. 屬性選擇器
css3中對屬性選擇器元素元素的查詢提供了五種形式
1.1 E[attr] 表示存在attr屬性即可找到
<!DOCTYPE html>
<html>
<head>
<title>css3中選擇器示例</title> 執行結果
1.2 E[attr=val]表示屬性值完全等於val
<!DOCTYPE html>
<html>
<head>
<title>css3中選擇器示例</title 執行效果
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>
執行結果
