HTML结构伪类选择器

最新推荐文章于 2022-02-10 21:37:00 发布
最新推荐文章于 2022-02-10 21:37:00 发布
阅读量137 收藏
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53917676/article/details/117409228
版权
本文深入探讨了CSS中的结构伪类选择器，如:nth-child(n)、:first-child和:last-child。通过实例解析了如何选择父元素的特定子元素，如选择偶数或奇数位置的子元素。了解这些选择器对于精准控制网页布局和样式至关重要。
摘要由CSDN通过智能技术生成

结构伪类选择器

E:nth-child(n)

  • 选择父级中的第一个“孩子”E：first-child

  • 选择父级中最后一个“孩子”E:last-child

  • nth-child会把所有的盒子都排列序号，之后回去看前面div

  • 如果没找到将不会被选择

  • 执行的时候会首先看nth-child(n)中的n的数字然后再去看E就是父级中的第n个孩子

  • n=0 1 2 3 4 5 到无穷大
    若要选择父级中所有的偶数孩子则可用
    E:nth-child(even);
    奇数
    E:nth-child(odd);
    E为选择的孩子如ul li:nth-child(even)
    若像

    index部分，部分省略

    `

    输出后header中的div会变色吗
    第一次写好粗糙加粗样式

小白羊有点憨
关注
专栏目录
结构伪类选择器（总结）
12-22
下面将详细阐述每一种结构伪类选择器的作用和用法。 **一类选择器：基于子元素的位置** 1. `:first-child`：选择其父元素的第一个子元素。例如，如果要为每个列表的第一项设置特殊样式，可以使用`li:first-child`...
HTML + CSS 连载 | 10 - CSS 伪类和伪元素
JingnanJia的博客
10-16 347
可以看到通过伪元素设置的内容已经被成功添加了样式，需要注意的是在使用伪元素的过程中，不要将 content 属性忽略，如果内容为空直接给空就可以，但是不能不写该属性。这种直接给元素的所有动态伪类都设置样式就相当于直接给 a 元素设置样式，当然分开设置可以给不同的状态设置不同的样式，或者直接设置，所有的状态都是一样的。，伪类也是选择器的一种，它用于选择处于特定状态的元素，比如当鼠标放在一个元素上时，元素的文本会变色或者图片会变大等。动态伪类指定让元素的不同的状态下设置 CSS 样式，除了 a 元素，
HTML5 零基础到实战（四）伪类和伪元素笔记
heart_6662的博客
02-10 2076
????个人简介 我已加入 1_bit 博主的免费前端 站起来 学习计划，专栏链接：一哥博客 ???? 作者简介：⭐️大一heart，还在学习（卷）当中，欢迎交流指正~???? ???? 个人主页 heart的博客???? ????如果文章知识点有错误的地方，请指正留言????！和大家一起学习，一起进步 ???? 系列专栏：大话前端???? ????格言：人生舞台的大幕随时都可能拉开，关键是你愿意表演，还是选择躲避???? ????如果感觉博主的文章还不错的话，请????三连支持一下博主????哦 目
HTML结构伪类选择器：
zlflyhhh的博客
01-11 360
HTML结构伪类选择器： 查找单个标签： 选择器 含义 E:first-child {} 第一个子元素且是E标签n E:last-child {} 最后一个子元素且是E标签 E:nth-child(n) {} 第n个子元素且是E标签 E:nth-last-chlid(n) {} 倒数第n个子元素且是E标签 查找多个标签： n的注意点：n为：0，1，2，3，4，5，6… 通过n可以组成常见的公式： 功能 公式 偶数 2n，even 奇数 2n+1，2
html中结构伪类选择器,结构伪类选择器
weixin_30308101的博客
06-03 1752
属性选择器元素的属性，我们都知道是什么。例如下面代码中type和value就是input元素的属性。属性选择器，顾名思义，就是通过属性来选择元素的一种方式。属性选择器 说明E[attr^="abc"] 选取了元素E，其中E元素定义了属性att，att属性值是以abc开头的任何字符串。E[attr$="abc"] 选取了元素E，其中E元素定义了属性att，att属性值是以abc结尾的任何字符...
HTML5中CSS3的结构伪类选择器
博客之家
05-09 3499
HTML5中CSS3的结构伪类选择器 1、E:nth-child(n) 2、E:nth-last-child(n) { sRules } 3*、E:nth-of-type(n) { sRules } 4、E:first-child { sRules } 5、E:last-child { sRules }
HTML5新增的Css选择器、伪类介绍
09-28
2. **结构伪类选择器**： - `>` (直接子元素选择器)：将样式应用到作为指定元素直接子元素的元素。例如，`div > p`会选择所有直接位于`<div>`内的`<p>`元素。 - `+` (相邻兄弟选择器)：选择紧接在另一个元素后的...
HTML5&CSS3网页制作：结构化伪类选择器.pptx
05-31
HTML5和CSS3是现代网页制作的核心技术，其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式，提高页面设计的灵活性和可维护性。 首先，`:root`选择器用于选取...
Emmet语法与CSS结构伪类详细介绍
最新发布
10-09
本文档介绍了Emmet的基础及其对于前端开发工作者效率...学习Emmet能够提升HTML和CSS开发工作的效率，并使CSS的选择与样式应用更为便捷灵活，请务必反复练习Emmet语法规则和常用的选择器命令来巩固相关知识和技术手法。
CSS中的属性选择符和结构化伪类
09-24
3. **`:nth-child(n)`**：这是一个更灵活的选择器，可以选取父元素的第n个子元素。`n`可以是数字、关键词（如`odd`或`even`）或者公式（如`an+b`）。例如，`li:nth-child(3)`会选择每个列表项中的第三个元素。 ```...
html之CSS结构器伪类选择器
weixin_42676584的博客
11-22 364
CSS结构器伪类选择器 本片文章主要是为了学习CSS3中 空格符：的意义。 下面是E:frist-child与E:frist-of-type的区别 在这里插入图片描述 注：如选着器未指定父元素，则父元素默认为body 空格符号如代码所示ul li:frist-child{color:red;}这里的空格符号的意义指的是ul标签下的li中的内容，而li后的:表示的就是伪类选着器这里表示的...
结构化伪类选择器
无区新手的博客
05-09 1万+
1.:root选择器     :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;titl...
html + css基础，HTML结构+常用标签。css引入方式+选择器
长安白猫
05-16 343
html 介绍 html叫超文本标记语言,是开发网页的语言 html中的标签大多数都是成对出现的, 格式: <标签名></标签名> html 基本结构 <!-- 这是一个HTML的注释--> <!-- 快捷键 使用 ctrl + / mac: command + / --> <!-- 这个注释可以使用单行,也可以多行 --&gt...
CSS3学习笔记 之 结构伪类选择器
@LeX
08-31 2564
结构伪类选择器可以根据DOM树中元素的相对关系来匹配特定的元素，其语法如下： 选择器 功能描述 E:first-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 E:last-child 作为父元素的最后一个元素的元素E，与E:nth-lat-child(1)等同 E:root 匹配E元素所在文档的根元素。在H
HTML中四种选择器
zxy9602的博客
03-13 1万+
1.类选择器class：“.class” 2. id 选择器：“#id” 3.派生选择器：“p strong” 4.属性选择器：“[title] / [title=te]” 代码如下： 选择器的选择 派生选择器 Hello 派生选择器！ id选择器 id-# Hello ID选择器！ class类选择器 Hello cla
HTML基本结构、CSS引入方式以及选择器
策码扬鞭的专栏
11-26 518
前端开发的核心语言 HTML 超文本标记语言 hyper text markup language HTML基本结构 文档头类型声明　　 根元素　　 CSS css的引入方式 CSS选择器前端开发的核心语言 HTML：结构 CSS：样式 JavaScript：行为 HTML超文本标记语言 hyper text markup language 超文本： 最重要：可以包含超链接； 超越文本：文字、
Day09JavaWeb【Jquery】选择器
翁老师的教学团队
09-17 371
jquery的选择器概述 （1）选择器是什么？ $() 特殊的”函数”，不同的字符串参数（代表不同的规则），执行之后可以获取页面的符合条件的元素返回 （2）选择器分类 基本选择器 层级选择器 属性选择器 基本过滤选择器 表单属性选择器 jquery的选择器-基本选择器*** （1）基本选择器 （2）css函数 在jquery中，修改样式的函数 参1：属性名 参2：属性值 （3）参数字符串可以为多个规则，使用，隔开，表示或者 <script type="text/javascript"
结构伪类选择器
qq_64970126的博客
01-07 2547
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素 选择符 解析 E:first-child 匹配父元素中的第一个子元素 E E:first-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个 第一种对E:f
CSS3选择器--结构性伪类选择器
热门推荐
Wendy
01-01 2万+
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名                  常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器       C
CSS3结构伪类选择器与伪元素选择器实战解析
"这篇教程详细解释了如何在CSS3中运用结构伪类选择器和伪元素选择器，以实现特定的样式效果。结构伪类选择器主要包括:first-child、:last-child、:nth-child(n)、:nth-child(2n)或:even、:nth-child(2n+1)或:odd以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值