当前位置：首页 > news >正文

CSS基础 - 选择器备忘录 --笔记5

news 2025/9/16 14:28:00

基础选择器

标签选择器 – tagname：匹配目标元素的标签名。优先级是0,0,1。如：p、h1、div
类选择器 – .class：匹配class属性中有指定类名的元素。优先级是0,1,0。如：.media、.menu
ID选择器 – #id：匹配拥有指定ID属性的元素。优先级是1,0,0。如：#container
通用选择器 – *：匹配所有元素。优先级是0,0,0。

组合器

组合器是将多个基础选择器连接起来组成一个复杂选择器。

后代组合器：两个基础选择器之间的空格，最常见的组合器。如 .nav-menu li
子组合器（>）：匹配的目标元素是其他元素的直接后代。如 .parent > .child
相邻兄弟组合器（+）：匹配的目标元素紧跟在其他元素后面。如 p + h2
通用兄弟组合器（~）：匹配所有跟随在指定元素之后的兄弟元素。注意，它不会选中目标元素之前的兄弟元素。如 li.active ~ li
复合选择器：多个基础选择器可以连起来组成一个复合选择器。如 h1.page-header。注意：复合选择器选中的元素将匹配其全部基础选择器。例如，.dropdown.is-active能够选中
，但是无法选中
。

伪类选择器

伪类选择器用于选中处于某个特定状态的元素。可能是由于用户交互，也可能是由于元素相对于其父级或兄弟元素的位置。伪类选择器始终以一个冒号（:）开始。优先级等于一个类选择器（0,1,0）。

:first-child – 匹配的元素是其父元素的第一个子元素。
:last-child – 匹配的元素是其父元素的最后一个子元素。
:nth-child(an+b) – 匹配的元素在兄弟元素中间有特定的位置。
:nth-last-child(an+b) – 类似于：nth-child()，但不是从第一个元素往后数，而是从最后一个元素往前数。
:first-of-type – 类似于：first-child，但不是根据在全部子元素中的位置查找元素，而是根据拥有相同标签名的子元素中的数字顺序查找第一个元素。
:last-of-type – 匹配每种类型的最后一个子元素。
nth-last-of-type(an+b) – 根据元素类型以及特定公式选择元素，从其中最后一个元素往前算，类似于：nth-last-child。
:not() – 匹配的元素不匹配括号内的选择器。括号内的选择器必须是基础选择器，它只能指定元素本身，无法用于排除祖先元素，同时不允许包含另一个排除选择器。
:focus – 匹配通过鼠标点击、触摸屏幕或者按Tab键导航而获得焦点的元素。
:hover – 匹配鼠标指针正悬停在其上方的元素。
:root – 匹配文档根元素。对HTML来说，这是元素，还可以应用到XML或者类似于XML的文档上，比如SVG。
:disabled – 匹配已禁用的元素，包括input、select以及button元素。
:enabled – 匹配已启用的元素，即那些能够被激活或者接受焦点的元素。
:checked – 匹配已经针对选定的复选框、单选按钮或选择框选项。
:invalid – 根据输入类型中的定义，匹配有非法输入值的元素。
:valid – 匹配有合法值的元素。
:required – 匹配设置了required属性的元素。
:optional – 匹配没有设置required属性的元素。
#伪元素选择器
伪元素类似于伪类，但是它不匹配特定状态的元素，而是匹配在文档中没有直接对应HTML元素的特定部分。
伪元素选择器可能只匹配元素的一部分，甚至向HTML标记中未定义的地方插入内容。
::before – 创建一个伪元素，使其成为匹配元素的第一个子元素。该元素默认是行内元素，可用于插入文字、图片或其他形状。必须指定content属性才能让元素出现，例如：.menu::before。
::after – 创建一个伪元素，使其成为匹配元素的最后一个子元素。该元素默认是行内元素，可用于插入文字、图片或其他形状。必须指定content属性才能让元素出现，例如：.menu::after。