2017/3/2 CSS学习部分总结

常用选择器：

1. 标签选择器
   格式：标签{ ... ... }

2. 类选择器
   . 类名{ ... ...} //可以用多个类选择器

3. ID选择器

   ID名{... ...} //一个html中只能用一次

   例如：

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

4. 子选择器
   标签元素1>标签元素2{ ... ...} //标签1的后一个

5. 后代选择器（包含选择器）
   标签元素1 标签元素2{ ... ...} //所有标签2的内容
   总结：>作用于元素的第一代后代，空格作用于元素的所有后代

6.伪类选择器
a:hover{ ... ... } //要考虑浏览器的兼容性问题

7.分组选择器
标签1，标签2，...{ ... ...} //同时为几个标签设置相同的样式

8.通用选择器
*{ ... ...}

------------------------------------俺滴小分割^_^ ---------------------------------------

• 对于浏览器来说，对CSS样式的加载时采用就近原则的，及内联式>嵌入式>外部式

• 在CSS样式中，先解析哪种样式，是通过各选择器的权值，一般，类选择器的权值为10， 标签选择器为1，ID选择器最高为100，继承（CSS中有些样式可以继承）最低，0.1。

  p{color:red;} /*权值为1*/
  p span{color:green;} /*权值为1+1=2*/
  .warning{color:white;} /*权值为10*/
  p span.warning{color:purple;} /*权值为1+1+10=12*/
  #footer .note p{color:yellow;} /*权值为100+10+1=111*/

• 对于一些样式，要想它最先被解析，可设置为！important
  例如：
  p{ color : red !important; }