CSS伪类、伪元素

最新推荐文章于 2024-10-06 23:37:55 发布

小李大魔王

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量265

点赞数 4

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_74261199/article/details/142682039

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS伪类、伪元素

一、伪类

① :hover

鼠标🖱悬停时的伪类，如：

/*	鼠标悬停到.box上时背景颜色变为红色	*/
.box:hover {
	background-color: red;
}

② :active

鼠标🖱点击时的伪类，如：

/*	鼠标点击时背景颜色变为灰色	*/
.box:active {
    background-color: grey;
}

③:not()

不选择指定的选择器，如：

/*	选中所有用了.box类选择器且不是h1标签的元素	*/
.box:not(h1) {
	font-size: 16px;
}

④ :focus

输入表单得焦点时的伪类，如：

/*	input获得焦点后背景变为粉红色	*/
input:focus {
    background-color: pink;
}

⑤ :first-child

父容器中第一个元素，且这个元素类型必须指定类型一致，有点不好直接理解，没关系，看代码:happy:

/*	.box的第一个孩子，且必须是p标签，才选中	*/
.box p:first-child {
    color: red;
}

⑥ :last-child

父容器中最后一个元素，且这个元素类型必须指定类型一致

/*	.box的最后一个孩子，且必须是p标签，才选中	*/
.box p:last-child {
    color: red;
}

⑦ :nth-child()

父容器中指定序号的元素（序号从1开始），且这个元素类型必须指定类型一致

/*	.box的第二个子元素，且必须是div类型	*/
.box div:nth-child(2) {
    width: 200px;
}
/*	n范围为[0,+oo)，所以 2n + 1 范围 [1, +oo)，即选中.box中序号为1，3，5，...等元素，且必须是div类型	*/
.box div:nth-child(2n + 1) {
    width: 200px;
}

⑧ :nth-last-child

从父容器中倒着取指定序号的元素，且这个元素类型必须指定类型一致

/*	.box的倒数第二个子元素，且必须是div类型	*/
.box div:nth-last-child(2) {
    width: 200px;
}
/*	选中.box1中倒数第一个，倒数第三个，...等元素，且必须是div类型	*/
.box div:nth-last-child(2n + 1) {
    width: 200px;
}

⑨ :first-of-type

父容器中第一个指定类型的元素，如：

/*	选中.box中第一个div，将高度设为100px	*/
.box div:first-of-type {
    height: 100px;
}

⑩ :last-of-type

父容器中最后一个指定类型的元素，如：

/*	选中.box中最后一个div，将高度设为100px	*/
.box div:last-of-type {
    height: 100px;
}

⑪ :nth-of-type

父容器中指定类型的元素第几个，如：

/*	选中.box中第二个div	*/
.box div:nth-of-type(2) {
    height: 100px;
}

/*	选中.box中第1, 3, 5, ...个div	*/
.box div:nth-of-type(2n + 1) {
    height: 100px;
}

⑫ :nth-last-type-of

与:nth-of-type取值顺序相反

⑬ :checked

勾选状态的表单，如：

<body>
	<input type="radio" chekced/>
	<input type="checkbox" checked/>
</body>
<style>
    input:checked {
        width: 30px;
        height: 30px;
    }
</style>

⑭ :disabled

选择禁用状态的表单，如：

<body>
	<input type="radio" disabled/>
	<input type="checkbox" disabled/>
</body>
<style>
    input:disabled {
        width: 30px;
        height: 30px;
    }
</style>

⑮ :enabled

选择可用状态的表单，如：

<body>
	<input type="radio"/>
	<input type="checkbox"/>
</body>
<style>
    input:enabled {
        width: 30px;
        height: 30px;
    }
</style>

二、伪元素

① ::before

在元素内容前插入一个虚拟元素

② ::after

在元素内容后插入一个虚拟元素

③ ::selection

用户选中的文本

④ ::placeholder

表单元素的占位符文本

以上伪元素使用方式如下：

<body>
	<h1>
        请输入你的名字
    </h1>
    <input type="text"/>
</body>
<style>
    /*	h1前添加[	*/
    h1::before {
        content: '['
    }
    /*	h1后添加]	*/
    h1::after {
        content: ']'
    }
    /*	h1中文本选中时改为红色	*/
    h1::selection {
        color: red;
    }
    /*	input占位字符颜色设置为灰色	*/
    input::placeholder {
        color: grey;
    }
</style>