前端管中窥豹之CSS篇，

一、CSS简介

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

1.注释

    /* 注释内容 可多行注释 */

2.语法

    选择器（属性:值;属性:值;……）

3.三种引入方式

4.标签通常都必须有的属性：

    id 唯一标识标签
    class 标签类属性 可以有多个，类似python面向对象的继承

二、如何查找标签

1.基本选择器

  1）标签选择器

标签名{属性名:值}

  2）id选择器

#id名{属性名:值}

  3）类选择器：相同类名的标签包括其嵌套的其他标签都更改样式

.类名{属性名:值}

  4）通用选择器：匹配 html 中的所有元素标签

*{属性名:值}

  5）共用选择器：多个标签更改样式（不同的选择器也可以共用一个样式）

标签名1，标签名2，标签名3{属性名:值}

2.组合选择器

  1）后代选择器：A标签中嵌套的所有B标签都更改样式

A B{属性名:值}

  2）儿子选择器:A标签中嵌套的子标签B(超过两层嵌套即非子标签)都更改样式

A > B {属性名:值}

  3）毗邻选择器:A标签下面(非嵌套)的第一个B标签更改样式

A + B {属性名:值}

  4）弟弟选择器:A标签下面(非嵌套)的所有B标签更改样式

A ~ B {属性名:值}

3.属性选择器:你可以给任意标签加任意的属性名和属性值

   [属性名]{样式}：属性名符合的标签更改样式
   [属性名=属性值]{样式}：属性名及属性值都符合的标签会更改样式
   也适用组合选择器

4.伪类选择器

   元素:伪类名{属性名:值}
   栗子：遵循爱恨原则，顺序不能变
       a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
       a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
       a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
       a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

5.伪元素选择器

   第一个字母
       ::first-letter{属性名:值}
   第一行（以浏览器为准的第一行）
       ::first-line{属性名:值}
   被选中的字行（鼠标选择的字段）
       ::selection
   ::before 和 ::after在内部内容的前面或者后面插入内容，必须带一个属性content

选择器优先级

    相同选择器 不同引用方式——就近原则 谁靠近标签谁生效
    不同选择器 相同引入方式——行内样式 > id选择器 > 类选择器 > 标签选择器