Css child选择器使用(奇数/偶数/最后一个子元)

最新推荐文章于 2024-03-05 10:46:09 发布
最新推荐文章于 2024-03-05 10:46:09 发布
阅读量3.1k 收藏 2
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35795555/article/details/118123716
版权

可了解一下内容

  1. 设置弧形边框和有阴影的背景[box-shadow、border-radius]
  2. 背景icon设置(background-size、background-position)
  3. div 文字居中[用flex布局]
  4. div根据元素自适应高度[设置min-height]
  5. child选择器，第几个子元素开始[ nth-child(n+3) 大于等于3开始]
  6. child选择器，奇数元素[ nth-child(2n+1) ]
  7. child选择器，偶数元素[ nth-child(2n) ]
  8. 最后一个子元素是奇数位元素[last-child + nth-child(2n+1) ]
  9. 了解absolute、relative 定位设置Icon

在这里插入图片描述

// HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>grid-test</title>
      <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div class="main">

        <div class="infoPart">
            <div class="btn firstModal"> 
                <div class="menuIcon"></div>
                上海 
            </div>
        </div>

        <div class="infoPart">
            <div class="btn"> 上海 </</
最低0.47元/天 解锁文章
weixin_35795555
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 783
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
CSS之:nth-child选择器
zqr4818的博客
05-31 585
今天在学习flex布局时，使用了:nth-childCSS选择器，使用到后面发现与我理解的有所偏差，经过不断学习，终于弄懂该选择器。言归正传，下面我来讲解该选择器。
css3中nth-child属性作用及用法剖析
最新发布
前端开发UI设计老司机-艾斯视觉
03-05 1399
CSS3中的nth-child选择器允许我们根据元素位置来定位特定的元素。本文将深入探讨nth-child属性的作用，并提供详细的用法示例。
详解css选择器
weixin_68613594的博客
07-16 1135
其中浏览器获取到了id为a2,a3,a4,a5的div标签，他们的父元素都是a1，而a1的最后一个子元素是p，不是div，所以无效。而first-of-type选择器则是选择父元素中第一个与指定类型相同的子元素，也就是说，如果父元素中有多个相同类型的子元素，只有第一个会被选择。通配符选择器用*号表示，*就是选择所有的标签 他是所有选择其中作用范围最广的，能匹配页面中所有的元素。first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。not，就是“非，不是” 的意思。
CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀
qq_60839348的博客
11-28 2082
CSS3新增选择器 nth-child(){}，盒子阴影、文字阴影，背景，浏览器内核与前缀
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
CSS_css选择器，选择所有子元素、最后一个、第一个、单数、双数、第n个、反选，nth-child，last-child，first-child
小歪博客
03-22 6692
html <div class="list"> <div></div> <div></div> <div></div> </div> <style> .list div{ width: 500px; height: 20px; margin-top: 5px; border: 1px solid #000; } </style> 选择全部 .list div{ back
CSS3伪类选择器：nth-child()
12-11
5. **奇偶匹配**: `:nth-child(odd)` 和 `:nth-child(even)`，这两个选择器分别对应于元素的奇数索引（1, 3, 5, ...）和偶数索引（2, 4, 6, ...）。 这些不同的用法使得开发者能够创建复杂的布局和交互，比如交替...
jQuery Selectors(选择器)的使用(七、子元素篇)
12-11
`:last-child` 相反，会选择父元素的最后一个子元素。`:only-child` 则选择那些在父元素中没有其他兄弟元素的唯一子元素。 以下是一些使用这些选择器的示例： 1. 将ID为"div_a1"的DIV中每个UL元素的第二个LI元素的...
简单讲解jQuery中的子元素过滤选择器
11-23
例如，如果你想要改变页面上每个`<ul>`的首项文字颜色，可以使用`$('li:first-child')`选择器，然后调用`.css('color', 'red')`方法，这样每个`<ul>`的第一个`<li>`子元素的文字颜色都会变为红色。 总的来说，...
jQuery子属性过滤选择器用法分析
12-02
`:last-child`选择器与`:first-child`类似，但它是用来选取父元素的最后一个子元素。在以下代码中，`$("ul:last-child")`选中所有作为其父元素的最后一个`<ul>`元素，并将其文本颜色设为红色。 ```javascript $("ul...
CSS :nth-child选择器终于搞清楚怎么用，实例详解
weixin_47378963的博客
02-16 2176
该选择器选择的是A选择器选择的元素的父元素中的第n个子元素，而且在匹配的阶段并没有元素类型的限制，但是，到了样式设置的阶段，却又有了元素类型的限制，比如p:nth-child(n)匹配p元素的父元素中的第n个元素，如果第n个元素刚好是p，则进行样式设置，如果不是p，比如是h2，则不会进行相关的样式设置。刚接触到CSS的:nth-child伪类选择器的时候，也是晕头转向的，搞不清楚“:nth-child(n) 选择器选择的是其父元素中的第 n 个子元素,而且元素没有类型限制”这句话是什么意思。
css奇数偶数选择器
web前端开发
11-30 3万+
前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-c...
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
嗨，朋友你好！我是前端领域的工作者
06-30 3410
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
CSS选取第几个标签元素：nth-child(n)、first-child、last-child
hangGe0111的博客
12-06 2269
转载：https://blog.csdn.net/longgeaisisi/article/details/78154169 nth-child（n）、first-child、last-child用法 注：nth-child(n)选择器匹配父元素中的第n个子元素。  n可以是一个数字，一个关键字，或者一个公式。 1.nth-child（n）用法：  1.1 nth-child(3)  表示选择...
html 选择偶数元素,CSS选取第一个、最后一个、偶数、奇数、第n个标签元素
weixin_42311022的博客
06-03 2128
本文将要为您介绍的是CSS选取第一个、最后一个、偶数、奇数、第n个标签元素,具体实现方法:1、first-childfirst-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff}2、last-childlast-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff}3、nth-child(3...
CSS3 :nth-child(n)使用注意
IT技术宅-北方的刀郎
02-07 4万+
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素
css-伪类选择器-:nth-child()-循环样式问题
zhangxy的博客
05-08 1711
循环样式： 目标样式： 代码如下： <view class="grids"> <view class="grid" wx:for="{{icons}}" wx:for-item="icon" wx:key="icon.itemTypeId" data-item-type-id="{{icon.itemTypeId}}" data-type-name="{{icon....
CSS的:nth-child选择器：如何选择相同元素中指定的元素
细节打败一切
06-28 4万+
现象： CSS中出现多个相同元素需要获取，依次给所有元素写class或者id又太麻烦 方法： 使用CSS的:nth-child选择器 一：首先写一个div容器 里面写了五个div 颜色都设置为了红色（为了方便区分） 二：获取div中的第一个 改变他的颜色 使用:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 括号里面的数...
css的nth-child选择器
07-28
:nth-child() 是 CSS 中的一个伪类选择器，用于选取某个父元素下特定位置的子元素。 :nth-child(n) 会选取父元素下第 n 个子元素，无论元素的类型是什么。其中 n 是一个正整数，可以是具体的数字，也可以是关键词...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值