🍓个人主页：bit.. 

🍒系列专栏：Linux(Ubuntu)入门必看   C语言刷题      数据结构与算法  HTML和CSS3

目录

一.CSS的撒比中样式表

1.2 内部样式表

1.3行内样式表

1.4外部样式表

1.5CSS引入方式的总结

二.Emmet语法

2.1快速生成HTML结构语法

2.2快速生成CSS样式语法

2.3快速格式化代码

三.CSS复合选择器

3.1什么是符合选择器

3.2后代选择器

3.3子代选择器(重要）

3.4并集选择器(重要）

3.5 伪类选择器（鼠标放在文字上面改变颜色）

3.6链接伪类选择器

 3.7 focus 伪类选择器

3.8复合选择器总结

一.CSS的撒比中样式表

    按照CSS样式书写的位置（或者引入的方式）CSS分为三大类：

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（链接式）

1.2 内部样式表

        内部样式表（内嵌样式表）式写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个

• 1. 后代选择器
  • 后代选择器

  3.3子代选择器(重要）

          子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

  语法： 

          元素1 >元素2 { 样式声明}

  上述语法表示元素1里面的所有直接后代(子元素) 元素2。

  
  
  我是儿子
  我是孙子

  div>a {样式声明}   /*选择div里面的所有最近一级a标签元素*/

  元素1和元素2中间用大于号隔开

  元素1是父级，元素2是子级，最终选择的是元素2

  元素2必须是亲儿子，其孙子，重孙子之类都不归他管，你可以叫它亲儿子选择器。

  3.4并集选择器(重要）

          并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

  
  
  熊大
  熊二
  光头强
  

  并集选择器是各选择器通过英文逗号(,) 链接而成，任何形式的选择器都可以作为并集选择器的一部分。

  语法:

         元素1,元素2 {样式声明}

  上述语法表示选择元素1和元素2

  例如：

  ul.div {样式声明}  /*选择u1和div标签元素*/

  • 元素1和元素2中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明

  3.5 伪类选择器（鼠标放在文字上面改变颜色）

  • 伪类选择器用于向某些选择器添加特殊的效果。比如：给链接添加特殊效果或者选择第一个，第n个元素。
  • 伪类选择器书写最大的特点是用冒号(:)表示，比如：hover: first-child 
  • 伪类选择器很多，比如 有链接伪类，结构伪类 

  3.6链接伪类选择器

  a:link	选择所有未被访问的链接
  a:visited	选择所有已被访问的链接
  a:hover	选择鼠标指针位于其上的链接
  a:active	选择活动链接(鼠标按下未弹起的链接）

   

  
  
  小猪佩奇
  

  链接伪类选择器注意事项：

  1. 为了确保生效，请按照LVHA的顺序声明  :link-   :visited-    :hover  :active。
  2. 记忆法：love hate 或者 lv宝宝hao
  3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

  链接伪类选择器在实际中开发的写法：

  /*a是标签伪类选择器，所有的链接*/

  a {

          color:gray;

  }

  /* hover 是链接伪类选择器，鼠标经过*/

  a:hover {

                  color:red;  /*鼠标经过的时候，由原来的灰色变为红色*/

                  }        

   3.7 focus 伪类选择器

          :focus 伪类选择器用于选取获得焦点的表单元素。

  焦点就是光标，一般情况下 类表氮元素才能获取，因此这个选择器也主要争对于表单元素来说。

  3.8复合选择器总结

  选择器	作用	特征	使用情况	隔开符号及用法
  后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
  后代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
  子代	选择某些相同样式的元素	可用于集体声明	较多	符号是逗号 .nav;header 实际开发的写法
  链接伪类	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:haver
  :focus	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法