首页 >  html代码 >  css伪类选择器

css伪类选择器

时间：2023-12-29

css存在大量伪类选择器，合理运用这些伪类选择器可以避免更多的js交互。注意：css伪类选择器的操作对象是dom中本身存在的元素，这点与伪元素如:befor、:after相反

一、常用结构性伪类选择器如下：

:nth-child(n)

匹配属于其父元素的第 N 个子元素，不论元素的类型，如：nth-child(1)是父元素中的第1个子元素
:nth-last-child(n)

语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数，如nth-last-child(1)是父元素中的最后1个子元素
:nth-of-type(n)

根据子元素类型匹配其中的序列
:nth-last-of-type()

根据子元素类型从最后匹配其中的序列，与:nth-of-type(n)正好相反
:first-child

匹配父元素的第一个子元素的样式
:first-of-type

匹配父元素的第一个选择器元素的样式，如p:fitst-of-type指定的是第一个子元素等同于 :nth-of-type(1)
:last-child

匹配父元素的最后一个子元素的样式
:last-of-type

匹配父元素的最后一个选择器元素的样式，等同于 :nth-last-of-type(1)
:only-child

选择器必须是子元素，匹配在父元素的子元素中唯一的一个标签
:empty

匹配不包含任何子元素的元素的样式
:has 根据条件匹配

二、has

hash有两种应用

1、当父元素至少包含一条子元素或满足某个条件时，应用样式

2、当存在相邻元素时候，应用样式

.card:has(.card-image) {//1、当.card元素存在.card-image子元素时，则匹配成功

  display: flex;

  align-items: center;
}

form:has(input:focused) { //2、结合表单，当input获取焦点时候，则匹配成功

   background-color: lightgrey;

}

.card h2:has(+ p) { }//3、当.card子元素h2后是否存在p元素，存在则匹配成功

    三、更多

    当然还有更多伪类选择器，如表单：required 状态的如:focus、:hover以及:active就不一一列举了