伪类和伪元素选择器

伪元素选择器

/* 选中的是div中的第一行文字 */div::first-line {

/* 选中的是div中被鼠标选择的文字 */div::selection (

/* 选中的是input元素中的提示文字 */input::placeholder/*

选中的是p元素最开始的位置,随后创建一个子元素 */p::before (content:"¥";

/* 选中的是p元素最后的位置,随后创建一个子元素 */p::after (

content:"¥"

伪类很像类,但不是类,是元素特殊状态的一种描述

a:link{ }选中的是没有访问过的<a>

a:visited{}选中的是访问过的类

a:hover{}选中的是鼠标悬浮状态的a元素

a:active{}选中的是鼠标激活状态的a元素

动态伪类:(就是根据动作和状态有变化的)

link->visited->hover->active(lvha)(lvhao)是一个正确的不会出问题的CSS顺序,否则有的效果不会出来,因为在CSS中写在下面的会覆盖掉写在上面的。

link和visited是<a>独占的

hover和active是别的元素也可以用的。

:focus可以获取焦点

input:focus{ }只有表单类元素和输入东西的元素的才能使用,input select.

:first-child{}是按照对于父元素而言的所有的子元素,无所谓子元素的类型是否一致。,进行排序的。

:last-chile{}

:nth-child(n)

  1. :first-child 所有兄弟元素中的第一个

  2. :last-child 所有兄弟元素中的最后一个

:nth-child(n) 所有兄弟元素中的第 n 个

:first-of-type 所有同类型兄弟元素中的第一个.

:last-of-type 所有同类型兄弟元素中的最后一个

:nth-of-type(n) 所有同类型兄弟元素中的 第n个

关子什的值:

  1. 0或不写:什么都选不中 -- 几乎不用。

  2. n:选中所有子元素 -- 几乎不用。

  3. 1~正无穷的整数 : 选中对应序号的子元素

4.2n 或 even :选中序号为偶数的子元素

5.2n+1 或 odd : 选中序号为奇数的子元素

-n+3 : 选中的是前 3 个

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个(n)

:nth-last-of-type(n)所有同类型弟元素中的倒数第n个

选择没有兄弟的元素(独生子女)only-child

:only-of-type选择没有同类型兄弟的元素

:root 根元素,就是html。

:empty 内容为空元素 (空格也算内容)

:not() 否定伪类

四、UI伪类:

  1. :checked 被选中的复选框或单选按钮

:enable 可用的表单元素(没有 disabled 属性)。

:disabled 不可用的表单元素 (有 disabled 属性)

相关推荐
Martin -Tang12 小时前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
向日的葵0062 天前
CSDN博客文章-爪印之约宠物收养管理系统
mysql·css3·html5·fastapi·宠物
Boop_wu2 天前
[前端] CSS 常用样式(聊天界面 / 网页布局专用)
前端·css·css3
辞忧九千七3 天前
前后端分离架构实战与项目落地:AI智能学习笔记管理系统
python·html·axios·css3·fastapi·dify
rising start3 天前
InsightEdu - 轻量智能学习平台
javascript·axios·css3·html5·fastapi·orm·dify
DFT计算杂谈5 天前
AMSET 设置多核并行计算
java·前端·css·html·css3
摇滚侠5 天前
12 移动端 WEB 前端 WEB 开发 HTML5 + CSS3 + 移动 WEB
前端·css3·html5
gCode Teacher 格码致知6 天前
Javascript提高:canvas画布的网格背景-由Deepseek产生
javascript·css·css3
gCode Teacher 格码致知6 天前
Javascript提高:使用canvas绘制一个绚丽的按钮-由Deepseek产生
javascript·css·css3
哆哆啦006 天前
CSS 选择器优先级计算规则
前端·javascript·css3