【CSS3】小项目中使用first-child遇到的坑

最新推荐文章于 2024-04-09 11:29:06 发布

原创

最新推荐文章于 2024-04-09 11:29:06 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

在CSS3练习项目中，博主因使用:first-child选择器导致颜色错误地应用到所有p标签。经排查，了解到该选择器实际作用于父元素的第一个特定类元素。通过学习，博主理解到空格在选择器中的含义，它表示后代选择器，导致了样式混乱。第二天，博主利用这一特性实现了文本的彩虹式美化。

博主在练习Grid布局的时候，因为偷懒没有给container里面的items上css类，打算直接用:nth-child进行设置,代码写好如下：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid彩虹布局</title>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Alphy洪武

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

:first-child的坑

weixin_44749729的博客

07-13

373

:first-child的坑 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器错误理解认为E:first-child选中E元素的第一个子元素 <style> div:first-child{color: red;} </style> <div class="demo"> <a>123</a> <a>123</a> <a>123</a> <a>123&l

关于Css的选择器 :first-child和:last-child所踩过的坑

weixin_44710964的博客

02-25

4002

做项目时用到了last-child选择器，结果没有出现预期的效果，查了下W3C的文档发现我想的没那么简单。就拿:last-child举例，文档中对其的解释是：指定属于其父元素的最后一个子元素的 p 元素的背景色什么意思呢？我详细说明一下：假如是 div:last-child 那么该选择器最终选择的元素是：对所有div标签的父元素的其最后一个子元素div 设置样式，也就是说，其父元素的最...

参与评论您还未登录，请先登录后发表或查看评论

css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type

wenmin1987的博客

11-23

5523

https://blog.youkuaiyun.com/erdouzhang/article/details/70842177 最近系统项目，遇到较多表格和 div 需要根据写样式的 1.first-child（IE7兼容）、last-child（IE8不兼容） html： <body> <h2>列表</h2> <ul> <li...

【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-20

6355

一、CSS3 结构伪类选择器二、E:first-child / E:last-child 选择器 1、E:first-child 选择器 2、E:last-child 选择器三、E:nth-child(n) 选择器 1、E:nth-child(n) 选择器语法说明 2、n 为数字的情况 3、n 为关键字的情况 4、n 为公式的情况 5、子元素类型不同的情况四、E:first-of-type / E:last-of-type / E:nth-of-type 选择器

html5 first child,:first-child | CSS属性参考

weixin_36350581的博客

06-17

1697

CSS :first-child伪类选择器用于匹配父元素中的第一个子元素。:first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素，例如：第一个段落...第二个段落...如果使用下面的CSS规则来添加样式，那么第一个段落的文字大小将被修改：p:first-child {font-size: 2em;}但是如果在容器中，段落不是第一个元素，那么它不会被匹配，例如：标题第一个段落...第...

CSS3的first-child选择器实战攻略

09-24

### CSS3的first-child选择器实战攻略知识点总结 #### 1. first-child与:first-of-child的区别 - **first-child选择器**：该选择器用于选择父元素中的第一个子元素。不论该子元素的类型是什么，只要它是第一个即可...

css选中父元素下的第一个子元素(:first-child)

11-19

在CSS（层叠样式表）中，`:first-child`伪类选择器是一个非常有用的工具，它允许我们选择并应用样式给父元素下的第一个子元素。然而，在实际使用中，可能会出现一些误解，导致预期效果与实际效果有所偏差。本文将...

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

11-21

`nth-child()`选择器是CSS3引入的一个强大工具，允许我们根据元素在同级元素中的位置来应用样式。例如，`nth-child(1)`会选择父元素的第一个子元素，`nth-child(3)`会选择第三个子元素。然而，这个特性在IE8及以下...

CSS3伪类:first-child 的学习中引发问题

心有猛狗

09-30

859

最近学伪类，学到一个伪类:first-child 选择属于其父元素的首个子元素,或者也可以说是表示一组兄弟标签中的第一个元素。其实使用起来挺简单的，也好理解。这文章要说的也不是这个伪类，而是在用这个伪类时发生的一个小问题 HTML Link1 Link2 link3 CSSol > li:first-child{ color: red; }/*将ol 的第一个 li 颜色设置为红色*

伪类选择器:first-child与:first-of-type区别

t1220130004的博客

12-06

756

1、:first-chlid,先找到所有标签里的第一个标签，再进行匹配，例如：结果：第一个先找到中的第一个孩子标签；第二个找标签中的第一个孩子，，不作用于页面。第三个找标签的第一个孩子，标签；第四个找标签的第一个孩子，标签。最后进行匹配，样式里的p与找到的标签匹配，匹配成功就作用，匹配不成功就不

那些年踩过的坑之:first-child伪类选择器

lyxkgc的博客

09-10

288

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school 嗯，乍一看好像说的不是很明白，因此这个选择器很容易让人误解，通常会有两种误解：误解一：认为E:first-child选中E元素的第一个子元素。误解二：认为E:first-child选中E元素的父元素的第一个E元素。你是不是也曾这样理解这个选择器或者现在仍然这样理解？以上两种理解都是错误的，为了证明上面两种理解是错的，看看下面的实例一个链接一个链接一个链接一个链接待续… ...

常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()

Wod_7的博客

05-22

3601

在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。

【CSS3】的语法【四】

最新发布

lianafany的博客

04-09

3364

但是，如果使用first-child选择器与last-child选择器，这个多余的class属性就不需要了。如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。将指定序号书写在“nth-child”或“nth-last-child”后面的括号中，如“nth-child（3）”表示第三个子元素，“nth-last-child（3）”表示倒数第三个子元素。

css第一个元素first-child匹配失败原因

weixin_45392204的博客

03-20

1017

匹配不到任何元素，因为在这里两个span都不是div的第一个子元素。匹配不到任何元素，因为在这里h1是div的第二个元素，不是第一个。匹配的是p元素，因为p元素是div的第一个子元素。匹配的是p元素，因为p元素是div的第一个子元素。

CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器

猿码互联

10-14

3567

在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。它是通过 ~ 或 + 符号来实现的。需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。

使用:first-child和:last-child选择器解决border重复的情景

VoiceMartha的博客

03-14

425

view组件样式：border-top：1rpx solid red；会出现boder重复，颜色加深的情况。v-for循环渲染view组件。选择器分别为列表的第一个和最后一个元素添加特定的样式。

CSS3---结构性伪类选择器—first-child

diyinjiao1404的博客

05-04

491

结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。示例演示通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href=...

Typora自定义主题css文件修改

惜洛-Jankin的博客

12-01

2858

此主题是本人根据主题Drake做了调整之后的自用主题，一下代码可用来借鉴css主题文件的修改，最终效果如下： :root { --monospace: "JetBrains Mono", HYZhengYuan, "Fira Code", Menlo, "Ubuntu Mono", Consolas; /*code font*/ --text-font: "正文字体", "汉仪正圆-55W", HYZhengYuan; --title-font:"标题字体","汉仪...

:first-child 的坑（first-child的伪类选择器不起作用）