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>
<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>
執行結果