手记

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

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; }
1人推荐
随时随地看视频
慕课网APP