选择兄弟元素中的第几个元素

最新推荐文章于 2024-05-28 11:31:46 发布

lamCCH

最新推荐文章于 2024-05-28 11:31:46 发布

阅读量1.5k

点赞数 1

分类专栏： css 文章标签： css css3 jquery

本文链接：https://blog.csdn.net/chenlim87/article/details/111667899

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

`:nth-child(an+b)`

这个CSS伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

0n+3或简单的3匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。
2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13…的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Document</title>
  <style>
    .parent p:nth-child(1){
      color: red;
    }
    .parent p:nth-child(2){
      color: blue;
    }
    .parent p:nth-child(3){
      color: green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p>我是p1</p>
    <p>我是p2</p>
    <p>我是p3</p>
    <p>我是p4</p>
    <p>我是p5</p>
  </div>
</body>
</html>

在这里插入图片描述

<style>
  /* 奇数 */
  .parent p:nth-child(2n+1){
     color: red;
  }
  /* 或 */
  /* .parent p:nth-child(odd){
     color: red;
  } */
  
</style>
<body>
  <div class="parent">
    <p>我是p1</p>
    <p>我是p2</p>
    <p>我是p3</p>
    <p>我是p4</p>
    <p>我是p5</p>
  </div>
</body>

在这里插入图片描述

<style>
  /* 偶数 */
  .parent p:nth-child(2){
     color: blue;
  }
  /* 或 */
  /* .parent p:nth-child(even){
     color: blue;
  } */
  
</style>
<body>
  <div class="parent">
    <p>我是p1</p>
    <p>我是p2</p>
    <p>我是p3</p>
    <p>我是p4</p>
    <p>我是p5</p>
  </div>
</body>

在这里插入图片描述

`:nth-last-child()`

这个css伪类从兄弟节点中从后往前匹配处于某些位置的元素。

注意: 这个伪类和 [:nth-child] 基本一致, 但它是从**结尾**计数, 而不是从开始计数。

例：获取下面div元素的倒数第二个p

<style>
  /* 倒数第二个 */
  .parent p:nth-last-child(2){
     color: blue;
  }
  /* 或 */
  /* .parent p:nth-child(3){
    color: blue;
  } */
  
</style>
<body>
  <div class="parent">
    <p>我是p1</p>
    <p>我是p2</p>
    <p>我是p3</p>
    <p>我是p4</p>
  </div>
</body>

在这里插入图片描述

`:first-child`

表示在一组兄弟元素中的第一个元素。

最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。

<style>
  ul li:first-child{
    color:red;
  }
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

与之对应的是:last-child

除了CSS选择器外，我们还可以使用jQuery选择器：:eq()

:eq(index) 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。上面的CSS选择器都是从1 开始的。
index是可以为负数的，如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。
它与css选择器的区别是，:eq()每次只能选择一个元素。

// 首先要引入jQuery
// 类parent下的第一个p元素
$('.parent p:eq(0)')

// 类parent下倒数第一个p元素
$('.parent p:eq(-1)')

lamCCH

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
选择兄弟元素中的第几个元素

:nth-child(an+b)这个CSS伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）0n+3或简单的3匹配第三个元素。1n+0 或简单的 n 匹配每个元素。2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。2n+1 匹配位置为 1、3、5、7
复制链接

扫一扫

专栏目录