前端之选择器“大锅炖”

目录

• CSS里的选择器
  • 通用选择器 0
  • 元素选择器 1
  • 类选择器 10
  • id选择器 100
  • 属性选择器 10
  • 分组选择器
  • 结合器 （空格组合）
    • 后代组合器
    • 直接子代组合器
    • 通用兄弟组合器
    • 相邻兄弟组合器
  • 伪选择器
    • 伪类（单冒号 10）
    • 伪元素（双冒号 1）

CSS里的选择器

GJ504b最近要考web期末了，顺便看mmdn总结一下选择器，参考

通用选择器 0

* 选择所有元素

元素选择器 1

html里元素除去尖括号

类选择器 10

class属性，对应匹配的

id选择器 100

id属性，匹配对应

属性选择器 10

按照给定的属性，选择所有匹配的元素
e.g. [autoplay]``[type="text"]: 对应所有带有autoplay属性的元素

---

复合选择器

分组选择器

选择器列表：（逗号分组）
A,B:同时匹配A,B

结合器 （空格组合）

后代组合器

A B:A 里面的所有 B

直接子代组合器

A > B ：只匹配A的直接子元素

通用兄弟组合器

A ~ B :匹配A后的左右同级B

相邻兄弟组合器

A + B :匹配紧邻A 后第一个 B

伪选择器

伪类（单冒号 10）

:hover（鼠标悬停）、:active（激活状态）、:focus（获得焦点）
:nth-child(n)（匹配第 n 个子元素）、:first-child、:last-child
:not(selector)（排除特定元素）、:empty（无子元素的元素）

伪元素（双冒号 1）

::before（在元素前插入内容）、::after（在元素后插入内容）
::first-letter（首字母）、::first-line（首行）