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>