[分享]css中怎么给子元素添加边框

在CSS中，我们经常需要给子元素添加边框。以下是几种常用的方法：

/* 方法一：使用子元素选择器 */
.parent > .child {
  border: 1px solid black;
}

/* 方法二：给子元素添加class */
.child {
  border: 1px solid black;
}

/* 方法三：使用伪元素before或after */
.child::before {
  content: "";
  display: block;
  border: 1px solid black;
} 

方法一使用了子元素选择器，即“>”符号，表示只选中.parent的直接子元素中的.child元素。这样可以有效避免给父元素和孙子元素添加边框，使得边框样式更加清晰。

方法二比较简单，只需要给子元素添加一个class，然后在CSS中设置边框样式即可。

方法三使用了伪元素before或after，在子元素的前面或后面插入一个空元素，然后对这个空元素设置边框样式。需要注意的是，伪元素默认是行内元素，所以需要在伪元素中设置display为block，使其变为块级元素，这样才能够给其添加宽度和高度。