前端 标签

提示

先看看 css 有哪些伪类和伪元素，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如:hover。伪元素用于创建一些不在文档树中的元素，并为其添加样式，也就是虚拟存在的，比如::before。

伪类

类型	说明
:link	链接伪类，未访问链接
:visited	链接伪类，已访问链接
:active	链接伪类，鼠标点击时
:hover	链接伪类，鼠标悬停时
:not	CSS 否定伪类
:focus	获得焦点的元素
:focus-within	表示一个元素获得焦点或该元素的后代元素获得焦点
:placeholder-shown	在 `<input>` 或 `<textarea>` 元素显示 placeholder text 时生效
:first-child	所属父元素的首个子元素
:nth-child	所属父元素的第 N 个子元素
:nth-last-child	所属父元素的第 N 个子元素，从最后一个计算
:nth-of-type	针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置
:first-of-type	表示一组兄弟元素中其类型的第一个元素
:last-of-type	父元素的所有子元素中的最后一个选定元素
:empty	没有子元素的元素。子元素只可以是元素节点或文本（包括空格）
:target	代表一个唯一的页面元素(目标元素)，其 id 与当前 URL 片段匹配
:checked	表示任何处于选中状态的 radio
:enabled	表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的
:disable	表示任何被禁用的元素

提示

配置作用：在 vue 项目中使用，删除未使用的 CSS 代码，达到减少项目打包压缩的作用

提示

文档目的：学习 CSS 预处理 SCSS 语法

SCSS 是 CSS 的一种扩展语言，具有良好的复用性和动态性

$primary-color: #f5222d;
$font-color: #ecac4a;
$primary-border: 1px solid $primary-color;

let [a, b, c] = [1, 2, 3]
console.log(a, b, c)

/**
 * @desc 判断是否是数组
 * @param {Array}} arr 数组
 */
export const arrJudge = (arr) => {
  if (Array.isArray(arr)) {
    return true
  }
}

同步请求：等待数据加载完成出现页面，先加载数据后进行页面数据展示异步请求：局部刷新页面，边请求，边展示，利于提高用户体验