css伪类选择器之结构伪类的理解

已于 2022-06-23 17:47:21 修改
阅读量74 收藏
点赞数
分类专栏： HTML+CSS 文章标签： css 前端 javascript
于 2022-06-22 21:36:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44611785/article/details/125417075
版权

规律

首先是个儿子(得有父级)
先排序，再匹配
:first-child  第一个儿子
:last-child   最后一个儿子
:nth-child()  
        数字 代表第几个
        公式  2n  2n-1
        关键词   偶数even  奇数odd
        css样式，先从后面看，满足后面的条件的在看前面

在这里插入图片描述

原理

浏览器css代码执行的时候，遵循的是right to left，为了高效查找节点，从最下面的开始查找的话，快准恨。

具体可以看这
https://segmentfault.com/q/1010000000713509

roooxy
关注
专栏目录
CSS3结构性伪类选择器九种写法
09-25
### CSS3结构性伪类选择器详解 随着前端技术的发展，CSS3为我们提供了更多灵活的选择器，使得网页布局和样式设计变得更加高效与便捷。其中，结构性伪类选择器是一组非常实用的功能，它允许我们根据元素在文档树中的...
Emmet语法与CSS结构伪类详细介绍
10-09
同时介绍了各种常用的结构伪类选择符，比如:nth-child, :nth-last-child, :nth-of-type等的应用场景，并对它们的不同之处做出对比解说。 适合作为基础知识点的学习材料用于Web前端新手，或是希望掌握Emmet快捷编码...
CSS伪类选择器详细讲解
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
html中结构伪类选择器,结构伪类选择器
weixin_30308101的博客
06-03 1760
属性选择器元素的属性，我们都知道是什么。例如下面代码中type和value就是input元素的属性。属性选择器，顾名思义，就是通过属性来选择元素的一种方式。属性选择器 说明E[attr^="abc"] 选取了元素E，其中E元素定义了属性att，att属性值是以abc开头的任何字符串。E[attr$="abc"] 选取了元素E，其中E元素定义了属性att，att属性值是以abc结尾的任何字符...
CSS3选择器--结构性伪类选择器
热门推荐
Wendy
01-01 2万+
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名                  常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器       C
html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
weixin_39630440的博客
06-03 565
子元素伪类选择器，指的就是选择某一个元素下的子元素。伪类选择器，相信小伙伴也接触过了，最典型的就是超链接的几个伪类：a:link、a:visited、a:hover、a:active。在CSS3中，子元素伪类选择器有两大类。(1):first-child、:last-child、:nth-child(n)、:only-child(2):first-of-type、:last-of-type、:nt...
html中结构伪类选择器,CSS 结构伪类选择器有几个？
weixin_32258919的博客
06-03 408
CSS 伪类用于向某些选择器添加特殊的效果。伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。CSS 结构伪类选择器有几个？1、:root()选择器 匹配元素所有在文档的根元素:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档...
什么是伪类选择器
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-10 1671
伪类选择器的基本概念伪类选择器的作用示例一：用户交互状态的伪类选择器代码解释示例二：文档树中的位置伪类选择器代码解释示例三：表单控件状态的伪类选择器代码解释示例四：伪类选择器的组合使用代码解释示例五：伪类选择器的高级用法代码解释实际工作中的使用技巧在CSS中，伪类选择器（Pseudo-Class Selector）是一种特殊的选择器，它允许开发者根据元素的状态或位置来选择元素。伪类选择器扩展了CSS的选择能力，使得开发者可以更灵活地控制页面样式。
CSS之伪类选择器与伪元素选择器
m0_51277853的博客
05-23 711
伪类选择器(a:hover, li:nth-child) 伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。)；还有不能被常规CSS选择器获取到的信息(比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child来获取到。) 动态伪类选择器 :link。元素被定义了超链接但并未被访问过 :visited。元素被定义了超链接并已被访问过 :active。元素被激活 :ho
【第四篇】CSS选择器之伪类选择器
Ethan's Blog
07-17 2911
介绍CSS中伪类选择器，包括:first-child,:first-of-type等子类伪类选择器，:focus,:hover等UI伪类选择器。
html伪类选择器Before,css3 伪元素和伪类选择器详解
weixin_31060209的博客
06-07 1160
伪类选择器：CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪元素选择器：并不是针对真正的元素使...
伪类、伪元素和Css选择器优先级规则
G81948577的博客
07-09 970
语法选择器名称::before{}使用前提：不管是否需要自定义内容，必须使用content属性a::before{color:red;效果如下。
结构伪类选择器（总结）
12-22
结构伪类选择器是CSS中的一个重要概念，...总的来说，结构伪类选择器为CSS提供了强大的定位能力，让开发者可以更好地控制网页的布局和样式，提升用户体验。理解并熟练运用这些选择器是成为高级CSS开发者的必要步骤。
css伪类伪元素域高级选择器的介绍
09-25
### CSS伪类、伪元素与高级选择器详解 #### 一、CSS伪类与伪元素概述 CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它提供了丰富的选择器来帮助开发者更加灵活地控制页面元素。其中，**伪类**和**伪元素...
CSS回顾-长度单位汇总详解
懒羊羊我小弟的博客
11-14 925
本文详细介绍了 CSS 中的长度单位。包括绝对长度单位（px、cm、mm、in、pt、pc）和相对长度单位（em、rem、%、vw、vh、vmin、vmax）。阐述了它们的定义、应用场景、优缺点，并对比了绝对长度单位与相对长度单位，指出绝对长度单位有固定参照，相对长度单位基于其他元素属性计算，在响应式设计中各有特点。
第八章 利用CSS制作导航菜单
l1397222107的博客
11-13 1026
* 使链接充满整个列表项区域 *//* 移除下划线 *//* 文字颜色 *//* 内填充 *//* 圆角效果 *//* 平滑过渡效果 *//* 鼠标悬停时改变背景色 *//* 文字颜色加深 */
css-50 Projects in 50 Days(4)
xwc999
11-14 260
【代码】css-50 Projects in 50 Days(4)
常见的 CSS-in-JS 库
jjsnc
11-14 256
后记 CSS-in-JS 优缺点。
【学习】【css】元素的水平垂直居中
最新发布
m0_61097007的博客
11-18 303
【代码】【学习】【css】元素的水平垂直居中。
深入理解CSS3选择器：伪类选择器详解
首先，我们来看一些常见的CSS伪类选择器： 1. `:link`：用于选择未被访问的链接。 2. `:visited`：用于选择已被访问的链接。 3. `:hover`：当鼠标指针位于元素之上时，该元素的样式会发生变化。 4. `:active`：元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值