CSS学习记录(一) ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第六天

写在前面

以下是我学习CSS过程中的一些CSS的学习笔记记录,主要目的是用于巩固基础知识，方便日后的回看复习。本节内容包含CSS里的选择器

基础选择器

• 标签选择器
  • 用HTML的标签名作为选择器的索引，作用范围是所有含有该标签的内容
  • 语法格式

    HTML标签 {
        属性1: 属性值1;
        ...
    }
    

• 类选择器
  • 相当于自己定义一类属性及其属性值，将它们共同放入一个类选择器中，若某些内容需要用到这些特征，则之后直接利用class="类名"进行调用即可
  • 语法格式

    .类名 {
        属性1: 属性值1;
        ...
    }
    

• id选择器
  • 与类选择器功能类似，但不同的是该选择器只能被一个标签调用
  • 语法格式

    #id名 {
        属性1: 属性值1;
        ...
    }
    

• 通配符选择器
  • 表示选中页面中的所有元素或者标签，给它们加上同一种样式
  • 语法格式

    * {
        属性1: 属性值1;
        ...
    }
    

复合选择器

• 后代选择器
  • 可以选择父元素里面的子元素
  • 语法格式

    元素1 元素2 {
        属性1: 属性值1;
        ...
    }
    

• 子选择器
  • 只能选择距离元素1最近的元素2
  • 语法格式

    元素1>元素2 {
        属性1: 属性值1;
        ...
    }
    

• 并集选择器
  • 可以选择多组标签，并且同时为它们定义相同的样式
  • 语法格式

    元素1,
    元素2,
    ... {
        属性1: 属性值1;
    }
    

• 伪类选择器
  • 该类选择器只要用来决定用户在执行某种操作时内容变成指定的样式，例如用户将鼠标聚焦在某个链接选项时该选择会加粗、改变颜色等
  • 链接伪类选择器
    • 包含：
      • a:link 选择所有未被访问的链接
      • a:visited 选择所有已被访问的链接
      • a:hover 选择鼠标指针位于其上的标签
      • a:active 选择活动链接（鼠标按下为松开的链接）
  • focus伪类选择器
    • 用于选取获得焦点的表单元素
    • 语法格式:input:focus { }

写在最后

以上便是我的一些学习笔记，若有不足，欢迎指出