[分享]css只显示一条分割线

在Web开发中，分隔线是经常使用的一个元素，它可以让页面更加有层次感和美观。但是有时候我们只想要一条分隔线，却被默认的样式给多了几条。那么该如何只显示一条分割线呢？以下是一些技巧。/ 方法一 / hr...

在Web开发中，分隔线是经常使用的一个元素，它可以让页面更加有层次感和美观。但是有时候我们只想要一条分隔线，却被默认的样式给多了几条。那么该如何只显示一条分割线呢？以下是一些技巧。

/* 方法一 */
hr {
    display: block;
    margin: 0;
    border: 0;
    height: 1px;
    background-color: #ccc;
}

/* 方法二 */
hr:not(:first-of-type) {
    display: none;
}

/* 方法三 */
hr {
    display: none;
}

hr:first-of-type {
    display: block;
    margin: 0;
    border: 0;
    height: 1px;
    background-color: #ccc;
} 

以上是三种方法，分别使用了CSS属性：display、margin、border、height、background-color、:not、:first-of-type 等。

方法一是将默认的分隔线去掉，然后通过设置 display: block; 和 height:1px; 来产生一条分隔线。margin 和 border 设置为 0，扩展宽度为父元素的 100%。

方法二是使用了 CSS3 的 :not() 函数来排除第一条分隔线，再将剩下的分隔线都设置为不显示。

方法三也是将所有分隔线都设置为不显示，然后通过 :first-of-type 选择器只显示第一个分隔线。和方法一类似，利用 margin 和 border 来扩展宽度为父元素 100%。

以上三种方法都可以实现只显示一条分隔线的效果，选择哪种方式，可以根据实际情况和个人审美选择。