css找某个元素的下个子元素,使用CSS获取特定位置的子元素

2023-05-16

想要使用CSS获取特定位置的子元素,可以使用CSS :nth-child()选择器。:nth-child()选择器仅用于选择属于其父级的第n个子级(无论类型如何)的元素。下面本篇文章就来给大家介绍一下CSS :nth-child()选择器,希望对大家有所帮助。

6cefa5e1205f

:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。

语法:: nth-child(arg) {

// CSS样式

}

参数:

其中arg是表示匹配元素的模式的参数。它可以是一个数字(number)、一个关键字(odd 或 even)或一个线性方程。

● number:表示其位置由参数指定的元素。

● odd:表示位置为奇数的元素,即1,3,5等。

● even:代表位置均匀的元素,即2,4,6等。

● 线性方程:表示每个正整数n的位置与模式A * n + B匹配的元素。n的值从零开始。

示例1:选择作为参数传递的元素

p:nth-child(2) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

6cefa5e1205f

示例2:选择偶数子元素

p:nth-child(even) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

6cefa5e1205f

示例3:选择奇数子元素

p:nth-child(odd) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

6cefa5e1205f

示例4:将线性等式作为参数

p:nth-child(3n + 2) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

效果图:

6cefa5e1205f

更多web前端开发知识,请查阅 HTML中文网 !!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css找某个元素的下个子元素,使用CSS获取特定位置的子元素 的相关文章

  • rvest 和 NHL 统计数据的 CSS 选择器问题

    我想从 hockey reference com 中抓取数据 特别是从以下链接中抓取数据 https www hockey reference com leagues NHL 1991 html https www hockey refer
  • 如何获得 calc() 函数的无单位结果

    我正在使用此计算来获取网页中的流体行高 line height calc 1 42em 1 55 1 42 100vw 300px 1080 300 数学是工作属性 除非我改变font size特定部分 因为line height应使用无单
  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的
  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • Twitter bootstrap:居中缩略图

    我有一个缩略图列表 它们有固定的尺寸 我希望连续缩略图的数量随着窗口的宽度而变化 使用 Twitter Bootstrap 这很容易 http jsfiddle net charlesbourasseau 5WvAL http jsfidd
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • 为什么此 TTF 字体在我的浏览器中无法使用?

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path
  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件?

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工

随机推荐