CSS3属性选择器(CSS3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3属性选择器</title>
<style>
/* 必须是input 但同时具有value 这个属性 即可选择这个元素 用[]进行包含 */
/* input[value] {
color: skyblue;
} */
/* 只选择type=text 文本框的input 选取出来 */
/* input[type=text] {
color: gray;
} */
/* 选择首先是div 然后是具有class属性 并且属性值 必须是icon开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=date] {
color: blue;
}
div.icon1 {
color: skyblue;
/* 类选择器和属性选择器 伪类选择器 权重都是10 */
}
</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="ico icon1">小图标1</div> 如果需要对这4个div进行相同的设置，可以使用多类名
<div class="ico icon2">小图标2</div>
<div class="ico icon3">小图标3</div>
<div class="ico icon4">小图标4</div>
<div>透明人</div> -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>透明人</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-date">1</section>
<section class="icon2-date">2</section>
<section class="icon3-ico">3</section>
</body>
</html>
