css 去掉其他兄弟节点

CSS可以用来选择元素并将其样式设置为特定的值。其中一个使用场景是去掉其他兄弟节点，让某个元素独占一行或一列。

/* 假设以下是 HTML 结构 */div class="container">
      div class="box">
    Box1/div>
      div class="box">
    Box2/div>
      div class="box">
    Box3/div>
    /div>
/* 如果想要让 Box2 独占一列 */.box {
      display: inline-block;
     /* 先把所有 box 都变为行内块元素，实现横排效果 */  width: 100px;
      height: 100px;
      border: 1px solid #ccc;
}
.box:nth-child(2) {
      display: block;
     /* 让第二个 box 变为块级元素，占据一整行 */  margin: 20px 0;
 /* 设置上下边距形成间隙 */}
    

上述代码中，我们先把所有的 box 元素设置为行内块元素，这样它们就可以横着排列。然后通过 :nth-child 伪类选择第二个 box 元素，并将其设置为块级元素，这样就能独占一整行了。

需要注意的是，:nth-child 伪类是从 1 开始计数的，而不是从 0 开始计数，所以要选取第二个元素应该写成 :nth-child(2)。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！