CSS 获取除第一个子元素外的其他子元素

liuyan1106_

于 2021-07-06 16:33:08 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css

本文链接：https://blog.youkuaiyun.com/liuyan1106_/article/details/118523294

CSS/CSS3 专栏收录该内容

14 篇文章

订阅专栏

效果预览：
在这里插入图片描述

一、基础的代码结构

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
</div>

<style>
  .box {
    display: flex;
  }

  .box .box-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 10px;
    width: 100px;
    height: 100px;
    background: #f00;
    font-size: 20px;
  }
</style>

二、实现方式

1 :not ()

/* 方法1 */
.box .box-item:not(:first-child) {
	background: #097fff;
}

2 :nth-of-type()

/* 方法2 */
.box .box-item:nth-of-type(n+2) {
	background: #097fff;
}

3 :nth-child()

/* 方法3 */
.box .box-item:nth-child(n+2) {
	background: #097fff;
}

4 ~

/* 方法4 */
.box .box-item:first-child ~ .box-item {
	background: #097fff;
}

~ 选择器：是查找某个指定元素后面的兄弟节点