Skip to content

CSS 选择器

基础选择器

  • 通用选择器:选择所有元素。例如:*
  • 元素选择器:直接选择 HTML 标签,例如 p
  • 类选择器:使用 . 选择指定类名的元素,例如 .className
  • ID 选择器:使用 # 选择指定 ID 的元素,例如 #idName
  • 属性选择器:
    • [attr]:选择具有指定属性的元素,例如 [type] 选择所有带有 type 属性的元素。
    • [attr=value]:选择指定属性等于某个值的元素,例如 [type="text"] 选择 typetext 的元素。
    • [attr~=value]
    • [attr|=value]
    • [attr^=value]:选择指定属性值以某个值开头的元素。
    • [attr$=value]:选择指定属性值以某个值结尾的元素。
    • [attr*=value]:选择指定属性值包含某个值的元素。

分组选择器

A, B

组合选择器

  • 后代选择器:选择某个元素内部的所有指定元素,用空格分隔,例如 div p 选择所有位于 div 内的 p
  • 直接子代选择器:选择某个元素的直接子元素,用 > 分隔,例如 ul > li 选择所有位于 ul 直接下的 li
  • 一般兄弟选择器:选择位于另一个元素之后的所有兄弟元素,用 ~ 分隔,例如 h1 ~ p 选择所有在 h1 之后的 p
  • 紧凑兄弟选择器:选择紧接在另一个元素之后的元素,用 + 分隔,例如 h1 + p 选择紧接在 h1 之后的第一个 p
  • 列组合器:A || B

伪选择器

动态伪类:

  • :hover:当用户将鼠标悬停在元素上时生效,常用于按钮或链接的交互效果。
  • :active:当用户点击并按住元素时生效,通常用于按钮或链接的按压效果。
  • :focus:当元素获得焦点时生效(如用户点击输入框或使用键盘导航到某个可聚焦元素)。
  • :focus-within:当某个元素本身或其子元素获得焦点时生效,适合用于父级元素的样式更新。

子元素选择伪类:

  • :nth-child(n):选择父元素中第 n 个子元素,n 可以是数字、odd(奇数)、even(偶数),或一个公式(如 2n+1)。
  • :first-child:选择父元素的第一个子元素。
  • :last-child:选择父元素的最后一个子元素。
  • :nth-of-type(n):选择父元素中第 n 个指定类型(如 <div><p>)的子元素。
  • :first-of-type:选择父元素中第一个指定类型的子元素。
  • :last-of-type:选择父元素中最后一个指定类型的子元素。

伪元素:

  • ::before / ::after:用于在元素内容之前或之后插入内容。
  • ::first-line / ::first-letter:用于选择元素的首行或首字母。

其他:

  • :not(selector):匹配不符合 selector 的元素,适用于排除某些样式。
  • :invalid:匹配无效的表单输入元素(根据 typepatternrequired 等属性)。
  • :lang:根据元素的语言属性(langxml:lang)匹配特定语言的内容。
  • :where(selector):匹配 selector 中指定的元素,优先级始终为零,适用于降低冲突风险或编写默认样式。
  • :is(selector):匹配 selector 中指定的元素,优先级由匹配的内部选择器决定,适用于优化选择器编写。

参考资料

基于 MIT 许可发布