关于CSS自学时的一些总结

资料来源于http://www.imooc.com慕课网

一、id与class的区别，如何使用，什么时候使用id，什么时候使用class？

1）区别：1.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

例如：下面代码是正确的：

 <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的：

 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

3. 一般是定义样式的时候用class，定义javascript的时候用id.

二、选择器有哪些

1）标签选择器：p{font-size:12px;line-height:1.6em;}

2）类选择器：.classname{font-size:12px;line-height:1.6em;}

3)id选择器：#ID{font-size:12px;line-height:1.6em;}

4）子选择器：用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

5）包含（后代）选择器：

.first  span{color:red;}与子选择器类似，区别在于子选择器是仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素

6)通用选择器：它的作用是匹配html中所有标签元素     * {color:red;}

7）伪类选择器：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
8）分组选择器：h1,span{color:red;}它相当于下面两行代码：
h1{color:red;}
span{color:red;}