CSS3新增选择器——属性选择器
属性选择器
顾名思义，就是根据元素的属性及其属性值来确定目标元素。
1.根据属性名确定元素：不使用类选择器或ID选择器，省去命名烦恼。
语法：
元素标签[属性]代码练习：
<input type="text" value="请输入用户名">
<input type="text">选择带有“value”属性的input元素，更改该元素字体颜色。
input[value] {
color: red;
}
2.根据属性值确定元素
语法：
元素标签[属性='属性值']代码练习：
<input type="text" value="请输入用户名">
<input type="text">
<input type="password" value="123">选择“value”属性值为password的input元素，更改该元素字体颜色。
input[type='password'] {
color: blue;
}
3.根据属性值中某些字符确定元素
- 根据属性值开头字符确定元素
语法：
元素标签[属性^='字符']代码练习：
<header class="icon1">小图标1</header>
<header class="icon2">小图标2</header>
<header class="icon3">小图标3</header>
<header class='header1'>小图标4</header>选择属性值带有icon的元素，更改元素字体颜色。
header[class^='icon'] {
color: purple;
}
- 根据属性值结尾字符确定元素
语法：
元素标签[属性$='字符']代码练习：
<section class="icon1-data">icon1-data</section>
<section class="icon2-data">icon1-data</section>
<section class="icon3-do">icon1-data</section>根据属性值结尾data字符确定元素并更改其字体颜色。
section[class$='data'] {
color: pink;
}
- 根据属性值中包含字符确定元素
语法：
元素标签[属性*='foot']代码练习：
<footer class="fo">fo</footer>
<footer class="foo">foo</footer>
<footer class="foot">foot</footer>
<footer class="footer">footer</footer>根据属性值中包含有foot的字符的确定元素并更改其字体颜色。
footer[class*='foot'] {
color: aqua;
}
THE END
