一、属性选择器介绍
顾名思义是通过元素的属性来选择元素的一种方式。元素的属性，我们都知道是什么，像下面这句代码中的id、type、value就是input元素的属性。
<input id="btn" type="button" value="按钮" />
实际上，属性选择器在CSS2.1时已经存在了，而CSS3在CSS2.1基础上对其进行了扩展，主要新增了3种，如下表所示。
利用属性选择器可以不用借助类或者id选择器
用法展示
1、选择第一个input
<input type="text" value="请输入用户名">
<input type="text">
应用范围必须是input 需要具有valuer这个属性,才可以选择这个元素
input[value]{
color: pink;
}
2、属性选择器还可以选择=值的某些元素
选择第一个input
<input type="text" name="" id="">
<input type="password" name="" id="">
不局限于input,div[class=a]或者其他标签也可以
input[type=test]{
color: pink;
}
3.属性选择器可以选择属性值开头的某些元素
选择class开头为icon的div：
<div class="icon1">hello</div>
<div class="icon2">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>
选择首先是div 然后 具有class属性 并且属性名必须是icon开头的
div[class^=icon]{
color:gray
}
4.属性选择器可以选择属性值结尾的某些元素
选择class结尾为data的div：
<div class="icon1-data">hello</div>
<div class="icon2-data">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>
css3设置选择：
选择首先是div 然后 具有class属性 并且属性名必须是data结尾的
div[class$=data]{
color:gray
}
5.属性选择器可以选择属性值包含的某些元素
选择class中包含abc的div：
<div class="icon1abc-data">hello</div>
<div class="icon2abc-data">hello</div>
<div class="abcd">hello</div>
<div class="icon3">hello</div>
<div class="icon4">hello</div>
选择首先是div 然后 具有class属性 并且属性名必须包含abc的
div[class*=abc]{
color:gray
}
二、伪类选择器:not
在CSS3中，我们可以使用:not()选择器来选取某一个元素之外的所有元素。这个选择器非常重要，在实际开发中用得非常多，大家要重点掌握。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li:not(.first)
{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="first">绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</body>
</html>
三、子元素伪类选择器
子元素伪类选择器，指的就是选择某一个元素下的子元素。伪类选择器，相信小伙伴也接触过了，最典型的就是超链接的几个伪类：a:link、a:visited、a:hover、a:active。
在CSS3中，子元素伪类选择器有两大类。
- （1）:first-child、:last-child、:nth-child(n)、:only-child
- （2）:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type
1、 :first-child、:last-child、:nth-child(n)、:only-child
举例：每个列表项都有不同样式
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li { height:20px; }
ul li:first-child{background-color:red;}
ul li:nth-child(2){background-color:orange;}
ul li:nth-child(3){background-color:yellow;}
ul li:nth-child(4){background-color:green;}
ul li:last-child{background-color:blue;}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分析：
想要实现上面同样的效果，很多初学者首先想到的是为每一个li元素都添加id或class来实现。但是这样会导致id和class泛滥，不利于网站后期的维护。而使用子元素伪类选择器，可以让结构与样式分离，使得HTML结构更加清晰，更利于后期维护和搜索引擎优化（即SEO）。
在这个例子中，“ul li:first-child{}”表示选择父元素（即ul）下的第一个子元素，这句代码等价于“ul li:nth-child(1){}”。“ul li:last-child{}”表示选择父元素（即ul）下的最后一个子元素，这句代码等价于“ul li:nth-child(5){}”。
举例：隔行换色
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li{ height:20px;}
/*设置奇数列的背景颜色*/
ul li:nth-child(odd) { background-color:red; }
/*设置偶数列的背景颜色*/
ul li:nth-child(even) { background-color:green; }
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
2、first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type
:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type和:first-child、:last-child、:nth-child(n)、:only-child，这两类子元素伪类选择器看起来非常相似，但是两者其实是有着本质上的区别的。
对于上面的解释，大家可能觉得比较难理解，我们先来看一个简单的例子：
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
对于:first-child来说，我们可以得到以下结果。
h1:first-child：
选择的是h1，因为父元素（即div）下的第一个子元素就是h1。
p:first-child：
选择不到任何元素，因为父元素（即div）下的第一个子元素是h1，不是p。
span:first-child：
选择不到任何元素，因为父元素（即div）下的第一个子元素是h1，不是span。
对于:first-of-type来说，我们可以得到以下结果。
h1:first-of-type：
选择的是h1，因为h1是父元素中h1类型的子元素，然后我们选择第一个h1（实际上也只有一个h1）。
p:first-of-type：
选择的是p，因为p是父元素中p类型的子元素，然后我们选择第一个p（实际上也只有一个p）。
span:first-of-type：
选择的是第一个span，因为span是父元素中span类型的子元素，我们选择第一个span。
从上面这个例子我们可以知道： :first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素实际上，:last-child和:last-of-type、:nth-child(n)和:nth-of-type(n)、:only-child和:only-of-type这几个的区别都是相似的，在此不再赘述。
