CSS选择器（基础、高级、CSS3）
css学习要点：
1、选择器怎么选；
2、属性、样式是什么。
1、css基础选择器
1.1 标签选择器
就是标签的名字。
<h1>前端与移动开发班<span>1期班</span>基础班</h1>
css：
<style>
span{
color：red；
}
</style>
注意：所有的标签都可以是选择器；无论这个标签藏得多深，都一定能被选上。写了某个标签的css，就是写了整个HTML文档中所有该标签的css。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。
1.2 id选择器
<p>我是段落1</p>
<p id="para2">我是段落2</p>
<p>我是段落3</p>
css：
<style type="text/css">
#para2{
color：red；
}
</style>
id选择符是#。
任何的HTML标签都可以有id属性，表示这个标签的名字。
id属性（这个标签的名字）可以随便命名，但是：
1、只能有字母、数字、下划线；
2、必须以字母开头；
3、不能和标签同名。比如id不能叫body、img等。
4、一个HTML页面不能出现相同的id，即使他们不是一个类型。
一个标签可以被多个css选择器选择，共同作用。
1.3 类选择器
.就是类的符号。类的英语是class。
所谓类，就是class的属性，class属性和id属性相似，任何的标签都可以携带class属性。
class标签可以重复，比如，页面上可能有很多标签都有teshu这个类：
<h3>我是一个三号标题</h3>
<h3 class="teshu">我是一个三号标题</h3>
<h3>我是一个三号标题</h3>
<p>我是一个段落</p>
<p class="teshu">我是一个段落</p>
<p class="teshu">我是一个段落</p>
css：
<style type="text/css">
.teshu{
color：red
}
</style>
同一个标签可能同时属于多个类，用空格隔开：
<h3 class="teshu zhongyao">我是一个三号标题</h3>
该h3同时属于teshu类和zhongyao类。
注意：
1、class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2、同一个标签可以同时携带多个类。
复习：html负责结构，css负责样式，js负责行为。
css写在head标签里面；css的容器：style标签。
正确的思路：就是用所谓“公共类”的思路，类就是提供公共服务，比如上述的teshu，一旦携带这个类名，就有相应的样式变化。每个标签就只需取自己想要的类。
也就是说：
1、不要去试图用一个类名，把某个标签的所有样式都写完。这个标签要多携带几个类，共同造成这个标签的样式。
2、每一个类要尽可能小，有公共的概念，能够让更多的标签使用。
·到底用id还是class？
答案：尽可能地用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一方面，我们会认为一个有id的元素有动态效果。
“类”上样式，“id”上行为
css“层叠式”的第一层含义：就是一个标签，可以同时被多个选择器（即标签选择器，id选择器和类选择器选择）从而影响样式。
2、css高级选择器
2.1 后代选择器
<style type="text/css">
.div1 p{
color：red；
}
</style>
空格就代表后代，.div1 p中p就是div1的后代（不管这里的p有多深，.div1 p都能影响到）。
空格可以多次出现。
.div2 .li2 p{
color：green
}
就是.div2里面的后代.li2里面的p。
后代选择器就是一种平衡，是共性、特性的平衡。当要把某一个部分的所有的东西进行样式改变，就要想到后代选择器。
后代选择器，描述的是祖先结构。
2.2 交集选择器
图1
h3.special{
color：red；
}
选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
交集选择器没有空格。
所以：h3.special（中间没有空格）h3 .special（中间有空格）不是一回事，前者是没有后代关系的交集选择器，后者是有后代关系的。
交集选择器可以连续交（一般不这么写）
h3.special.important{
color：red；
}
交集选择器，一般是以标签名开头，比如h3.special。
2.3 并集选择器（分组选择器）
h3，li{ color：red }
用逗号，表示并集。
2.4 通配符*
通配符*表示所有元素
效率不高，页面上的标签越多，效率越低，所以页面上不能出现这种选择器。
3、一些CSS3选择器
3.1 儿子选择器>
IE7开始兼容，IE6不兼容。
<div>
<p>我是div的儿子，我的颜色是红色</p>
</div>
css:
div>p{
color:：red；
}
div的儿子p和div的后代截然不同，不要混淆。
如果这里的p是：
<div>
<ul>
<p>我不是div的儿子，上述css不能让我变成红色</p>
<li>
<li>
</ul>
</div>
那么上述CSS则不能用来控制这里的p。
3.2 序选择器
IE8开始兼容，IE6、IE7都不兼容。
<div>
<ul>
<p>我的爱好</p>
<li>听歌</li>
<li>弹吉他</li>
<li>看书</li>
<li>旅行</li>
<li>学习</li>
<li>水果</li>
</ul>
</div>
选择第一项爱好改变样式CSS：
ul li：first-child{
color：red；
}
选择第二项爱好改变样式CSS：
ul li：last-child{
color：red；
}
选择任意项爱好改变样式CSS：
ul li：nth-child（n）{
color：red；
}
比如，选择第四个：
ul li：nth-child（4）{
color：red；
}
比如，选择偶数项：
ul li：nth-child（2n+2）{
color：red；
}
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名，用类选择器来选择第一个或者最后一个。
3.3 下一个兄弟选择器
IE7开始兼容，IE6不兼容。
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
CSS格式选中h3后面的第一个p：
<style type="text/css">
h3+p{
color：red；
}
</style>
