零基础Vue的小白学习路——CSS基础（一）语法基础及CSS选择器

•         在前面的学习中，我们已经会使用HTML对网页结构及要素进行大体的规划，但是HTML能够实现的功能非常有限，其对于标签要素的呈现样式不能做多少改变。就好像一只动物我们只赋予了其骨骼，还没有血肉。因此我们需要CSS语言来实现这一功能。
• CSS：层叠（一层一层）样式（文本大小、背景颜色......）表（列表），一种标记语言，用于给HTML结构设置样式。
  • CSS的编写位置：
    • 行内样式：写在标签内部，只能控制当前标签样式，不能复用，对其他标签无效；书写繁琐，没有体现结构与样式分离的思想。
    • 内部样式：写在HTML内部，将所有CSS代码提取出来，单独放在<style>标签中。可复用，但并没实现结构和样式完全分离，多个HTML页面无法复用样式。
    • 外部样式：写在单独的.css文件中，通过html文件的<link>标签引入。多HTML页面可复用，结构清晰，实现结构和样式的完全分离；可触发浏览器缓存机制，提高访问速度。
  • 样式表的优先级：行内样式>内部样式=外部样式，同优先级后来者居上。
  • CSS的语法规范：
    • 选择器{声明；声明；声明......}
    • 注释的写法：/* 注释内容 */
  • CSS的代码风格：
    • 展开风格：开发时使用，方便调试
    • 紧凑风格：项目上线时使用，可减小文件体积
  • CSS选择器：
    • 基本选择器：
      • 通配选择器(*)：为页面中所有元素统一设置样式
      • 元素选择器：为页面中某种元素统一设置样式
      • 类选择器(.类名)：根据元素的class值，来选中某些元素
        • 元素的class属性值不带"."，但CSS的类选择器要带"."。
        • class值命名不能用数字开头，不要使用中文。
        • 单元素属于多个类，写class值时在类之间用空格隔开。
      • ID选择器(#id名)：每个标签ID唯一，单独选择某个元素
    • 交集选择器（选择器1选择器2选择器3......）：选中同时符合多个条件的元素。
      • 有标签名，元素标签名必须写在前面
      • 用的最多的就是元素选择器配合类名选择器：例如p.beauty
    • 并集选择器（选择器1，选择器2，选择器3......）：选中多个选择器对应的元素。
      • 任何形式的选择器，都可以作为并集选择器的一部分
      • 并集选择器，通常用于集体声明，可以缩小样式表体积。
    • HTML中元素间关系：
      • 父元素：直接包裹某个元素的元素就是该元素的父元素。
      • 子元素：被父元素直接包含的元素。
      • 祖先元素：父亲或父亲的父亲.....以上都是祖先元素。
      • 后代元素：儿子或儿子的儿子.......都是后代元素。
      • 兄弟元素：具有相同父元素的元素，互为兄弟元素。
    • 后代选择器（祖先选择器 后代选择器 后代选择器......）：选择某个祖先元素下的后代元素。
      • 最终选择的是后代元素，不是祖先。
      • 儿子，孙子，重孙子等等都算是后代。
    • 子代选择器（父选择器>子选择器>孙子选择器）：
    • 兄弟选择器：
      • 相邻兄弟选择器（选择器1+选择器2）：选择指定元下方紧邻的兄弟元素。简记：睡在我下铺的兄弟。
      • 通用兄弟选择器（选择器1~选择器2）：选择指定元素下方所有符合条件的兄弟元素。简记：睡在下铺的所有兄弟
    • 属性选择器：
      • [属性名]：选择具有该属性的元素
      • [属性名="属性值"]：选择具有该属性且为特定属性值的元素
      • [属性名^="a"]：选择具有该属性且属性值以a开头的元素
      • [属性名$="a"]：选择具有该属性且属性值以a结尾的元素
      • [属性名*="a"]:选择具有该属性且属性值包含字母a的元素
    • 伪类选择器：（元素名：状态）选中特殊状态的元素，像类，但不是类，是元素的一种特殊状态。
      • 动态伪类：
        • 1、link：超链接未被访问的状态
        • 2、visited：超链接被访问的状态
        • 3、hover：鼠标悬浮在元素上的状态
        • 4、active：元素激活的状态（鼠标按住元素不松开）
        • 5、focus：获取焦点的状态（表单类元素特有）
      • 结构伪类：
        • 1、first-child：所有儿子元素中的第一个
        • 2、last-child：所有儿子元素中的最后一个
        • 3、nth-child：所有儿子元素中第n个
        • 4、nth-last-child：所有儿子元素中的倒数第n个
        • 5、first-of-type：所有同类型儿子元素中的第一个
        • 6、last-of-type：所有同类型儿子元素中的最后一个
        • 7、nth-of-type：所有同类型儿子元素中的第n个
        • 8、nth-last-of-type：所有同类型儿子元素中的倒数第n个
        • 9、only-child：选中的是唯一儿子元素
        • 10、only-of-type：选中的是该类型的唯一儿子元素
        • 11、root：根元素
        • 12、empty：内容为空元素
      • 否定伪类选择器：
        • not(条件)：排除满足括号中条件的元素
      • UI伪类选择器：
        • 1、checked：被选中的复选框或单选按钮
        • 2、enabled：可用的表单元素（没有disabled属性）
        • 3、disabled：不可用的表单元素
      • 目标伪类选择器：
        • target：选中锚点指向的元素
      • 语言伪类选择器：
        • lang()：根据指定的语言选择元素
      • 伪元素选择器（::伪元素选择器）：很像元素，但不是元素，是元素中的一些特殊位置。
        • ::first-letter：第一个字母
        • ::first-line：第一行
        • ::selection：选中被鼠标选中的内容
        • ::placeholder：选中输入框的提示文字
        • ::before：元素最开始的位置插入指定内容
        • ::after：元素最后的位置插入指定内容
      • 选择器优先级：
        • 简单描述：行内样式>ID选择器>类选择器>元素选择器>通配选择器
        • 详细版：计算选择器权重（a,b,c），逐位向后比较，前面位胜出，后位不再比较。！important > 行内样式 > 权重对比
          • a：ID选择器的个数
          • b：类、伪类、属性选择器个数
          • c：元素、伪元素的个数