CSS3新增屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS3新增屬性選擇器</title>
<style>
/* 類選擇器和屬性選擇器 僞類選擇器 權重都是 10 */
/* 必須是input 且同時具有 value屬性 選擇這個元素 [] */
input[value] {
color: pink;
}
/* 隻選擇 type =text 文本框的input 選取出來 */
input[type="text"] {
color: pink;
}
/* 選擇 div 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */
div[class^="icon"] {
color: red;
}
/* 選擇 section 具有class屬性 并且屬性值 必須是 data結束的這些元素 */
section[class$="data"] {
color: blue;
}
div.icon1 {
color: skyblue;
}
</style>
</head>
<body>
<!-- 1. 利用屬性選擇器就可以不用借助于類或者id選擇器 -->
<input type="text" value="請輸入使用者名" />
<input type="text" />
<!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素 -->
<input type="text" name="" id="" />
<input type="password" name="" id="" />
<!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 -->
<div class="icon1">aaaa</div>
<div class="icon2">bbbb</div>
<div class="icon3">cccc</div>
<div class="icon4">dddd</div>
<div>ffff</div>
<!-- 4. 屬性選擇器可以選擇屬性值結尾的某些元素 -->
<section class="icon1-data">嘿嘿</section>
<section class="icon2-data">哈哈</section>
<section class="icon3-ico">嗷嗷</section>
</body>
</html>
CSS3新增屬性選擇器 
CSS3新增屬性選擇器
