首页 前端知识 web前端css学习笔记(3)——伪类选择器、选择器优先级

web前端css学习笔记(3)——伪类选择器、选择器优先级

2024-06-11 09:06:28 前端知识 前端哥 138 898 我要收藏

文章目录

  • 前言
  • 一、伪类选择器
    • 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 个

<style>
    /* 选中的是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;
    }
</style>

了解:
: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年的前端基础视频整理而成。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11897.html
标签
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!