web前端css学习笔记(3)

您所在的位置：网站首页 › a标签的四个伪类的顺序是 › web前端css学习笔记(3)

web前端css学习笔记(3)

2023-04-01 23:20| 来源: 网络整理| 查看: 265

文章目录前言一、伪类选择器1.动态伪类2.结构伪类3.否定伪类4.UI伪类5.目标伪类*6.语言伪类* 二、伪元素选择器三、选择器的优先级总结

前言

本节学习伪类、伪类选择器。

一、伪类选择器

选中特殊状态的元素

1.动态伪类

:link 超链接未被访问的状态 :visited 超链接访问过的状态 :hover 鼠标悬停在元素上的状态 :active 元素激活的状态（鼠标按下不松开） :focus 获取焦点的元素

2.结构伪类

:first-child 所有兄弟元素中的第一个 :last-child 所有兄弟元素中的最后一个 :nth-child(n) 所有兄弟元素中的第 n 个 :first-of-type 所有同类型兄弟元素中的第一个 :last-of-type 所有同类型兄弟元素中的最后一个 :nth-of-type(n) 所有同类型兄弟元素中的第n个

n的情况： 0 或不写：什么都选不中 —— 几乎不用 2. n ：选中所有子元素 —— 几乎不用 3. 1~正无穷的整数：选中对应序号的子元素 4. 2n 或 even ：选中序号为偶数的子元素 5. 2n+1 或 odd ：选中序号为奇数的子元素 6. -n+3 ：选中的是前 3 个

/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） */ div>p:first-child { color: red; } /* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） */ div p:first-child { color: red; } /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） */ p:first-child { color: orange; }

了解： :nth-last-child(n) 所有兄弟元素中的倒数第 n 个 :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个 :only-child 选择没有兄弟的元素（独生子女） :only-of-type 选择没有同类型兄弟的元素 :root 根元素 :empty 内容为空元素（空格也算内容）

3.否定伪类

:not(选择器) 排除满足括号中条件的元素

/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */ div>p:not(.fail) { color: red; } 4.UI伪类

:checked 被选中的复选框或单选按钮 :enable 可用的表单元素（没有 disabled 属性） :disabled 不可用的表单元素（有 disabled 属性）

/* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /* 选中的是被禁用的input元素 */ input:disabled { background-color: gray; } 5.目标伪类*

:target 选中锚点指向的元素可以与配合使用

6.语言伪类*

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

二、伪元素选择器

选中元素中的一些特殊位置 ::first-letter 选中元素中的第一个文字 ::first-line 选中元素中的第一行文字 ::selection 选中被鼠标选中的内容 ::placeholder 选中输入框的提示文字 ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容） ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

/* 选中的是p元素最开始的位置，随后创建一个子元素 */ p::before { content:"￥"; } /* 选中的是p元素最后的位置，随后创建一个子元素 */ p::after { content:".00" } 三、选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

具体计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数 b : 类、伪类、属性选择器的个数 c : 元素、伪元素选择器的个数

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比

选择器权重ul>li(0,0,2)div ul>li p a span(0,0,6)#atguigu .slogan(1,1,0)#atguigu .slogan a(1,1,1)#atguigu .slogan a:hover(1,2,1)

行内样式权重大于所有选择器 !important 的权重，大于行内样式，大于所有选择器，权重最高

总结

本节接上一节，学习了最后的伪类选择器和伪元素选择器。选择器优先级有自己的计算方式，从左往右计算。

根据尚硅谷张天禹老师2023年的前端基础视频整理而成。

【本文地址】

web前端css学习笔记(3)

web前端css学习笔记(3)

今日新闻

推荐新闻