现阶段主要学习CSS3三种新增特性：新增选择器、盒子模型和其他特性。
这篇文章主要学习新增选择器内容。
新增选择器
回顾css知识，选择器大类可分为基础选择器和复合选择器两种。
基础选择器：标签选择器、类选择器、id选择器和通配符选择器。
复合选择器：后代选择器、子选择器、并集选择器、伪类选择器。
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;
}注：在权重方面，属性选择器也是10。在使用选择器时注意权重优先级。
今天学习的是CSS3新增选择器中的属性选择器。 下篇学习新增的结构伪类选择器和伪元素选择器两个。
今天先到这里，拜~