Manufararun yanzu ƙananci CSS

CSS 伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 当用户将鼠标悬停在元素上时设置样式
  • 为已访问和未访问的链接设置不同的样式
  • 当元素获得焦点时设置样式
  • 为有效/无效/必填/选填的表单元素设置样式

下表展示了 CSS 中不同的伪类：

伪类 例子 例子描述
:active a:active 选择活动链接
:any-link a:anylink 选择所有带有 href 属性的 <a> 或 <area> 元素。
:auto-fill input:autofill 选择所有由浏览器自动填充值的 <input> 元素。
:checked option:checked 匹配所有被选中的 <input> 或 <option> 元素。
:default input:default 选择一组相关元素中的默认表单元素。
:defined :defined 选择所有已定义的元素（标准或自定义元素）。
:dir() :dir(rtl) 选择具有指定文本方向的元素。
:disabled option:disabled 选择所有被禁用的元素，常用于表单元素。
:empty div:empty 选择所有没有子元素（包括文本节点）的元素。
:enabled input:enabled Chọn tất cả các phần tử được kích hoạt, thường được sử dụng cho các phần tử biểu mẫu.
:first @page :first Biểu thị trang đầu tiên của tài liệu in (được sử dụng cùng với quy tắc @page).
:first-child p:first-child Chọn phần tử là con đầu tiên của phần tử cha của nó (trong nhóm anh em).
:first-of-type li:first-of-type Chọn phần tử đầu tiên trong nhóm anh em có loại đặc biệt.
:focus select:focus Chọn phần tử được tập trung, thường được sử dụng cho các phần tử biểu mẫu.
:focus-visible button:focus-visible Chọn phần tử được tập trung (chỉ áp dụng phong cách tập trung khi sử dụng phím而非 chuột).
:focus-within form:focus-within Khớp với phần tử hoặc bất kỳ phần tử con nào của nó khi được tập trung.
:fullscreen :fullscreen Chọn phần tử ở chế độ toàn màn hình hiện tại.
:has() h2:has(+p) Chọn phần tử <h2> đứng sau phần tử <p> và áp dụng phong cách cho <h2>.
:hover a:hover Chọn phần tử bị dừng trỏ chuột.
:in-range input:in-range Chọn phần tử <input> có giá trị trong khoảng đã chỉ định.
:indeterminate input:indeterminate Chọn phần tử biểu mẫu ở trạng thái không chắc chắn.
:invalid input:invalid Chọn phần tử biểu mẫu không hợp lệ.
:is() :is(ul, ol) تمام عناصر <ul> و <ol> را انتخاب کنید.
:lang() p:lang(it) Chọn phần tử <p> có thuộc tính lang là "it" (tiếng Ý).
:last-child li:last-child Chọn phần tử <li> là con cuối cùng của phần tử cha của nó.
:last-of-type p:last-of-type Chọn phần tử <p> là phần tử <p> cuối cùng của phần tử cha của nó.
:left @page :left Biểu thị tất cả các trang bên trái của tài liệu in (được sử dụng cùng với quy tắc @page).
:link a:link Chọn tất cả các liên kết chưa được truy cập.
:modal :modal Chọn phần tử ở trạng thái mô đun.
:not() :not(p) Chọn tất cả các phần tử không phải là phần tử <p>.
:nth-child() p:nth-child(2) Chọn phần tử <p> là con thứ hai của phần tử cha của nó.
:nth-last-child() p:nth-last-child(2) 选择作为其父元素倒数第二个子元素的 <p> 元素。
:nth-last-of-type() p:nth-last-of-type(2) 选择作为其父元素倒数第二个 <p> 元素的 <p> 元素。
:nth-of-type() p:nth-of-type(2) 选择作为其父元素第二个 <p> 元素的 <p> 元素。
:only-child p:only-child 选择作为其父元素唯一子元素的 <p> 元素。
:only-of-type p:only-of-type 选择作为其父元素唯一 <p> 元素的 <p> 元素。
:optional textarea:optional 选择没有 required 属性的 <input>、<select> 或 <textarea> 元素。
:out-of-range input:out-of-range 选择值超出指定范围的 <input> 元素。
:placeholder-shown input:placeholder-shown 选择当前显示占位符文本的 <input> 或 <textarea> 元素。
:popover-open :popover-open 选择处于显示弹出状态的元素。
:read-only input:read-only 选择带有 readonly 属性的输入元素。
:read-write input:read-write 选择可编辑的输入元素。
:required input:required 选择带有 required 属性的输入元素。
:right @page :right 表示打印文档的所有右侧页面（与 @page 规则一起使用）。
:root :root 选择文档的根元素。
:scope :scope 选择作为选择器匹配参考点或范围的元素。
:state() :state() 选择具有指定自定义状态的自定义元素。
:target :target 选择当前活动的目标元素。
:user-invalid :user-invalid 选择具有无效值的表单元素（在用户与其交互后）。
:user-valid :user-valid 选择具有有效值的表单元素（在用户与其交互后）。
:valid input:valid 选出所有具有有效值的输入元素。
:visited a:visited تمام لینک‌های بازدید شده را انتخاب کنید.
:where() :where(ol, ul) تمام عناصر <ul> و <ol> را انتخاب کنید.