设置css列中第一项的样式

我有一个列表，它显示在多个列上。每个列表项都是块元素（display:block），并附加了一些样式（底部的1px边框）。目前看起来是这样的：

List item    List item    List item
---------    ---------    ---------
List item    List item    List item
---------    ---------    ---------
List item    List item
---------    ---------

我想在每列第一项的顶部添加一个相同的边框，例如

---------    ---------    ---------    
List item    List item    List item
---------    ---------    ---------
List item    List item    List item
---------    ---------    ---------
List item    List item
---------    ---------

我尝试过：first-line和：：first-line，在本例中，这两种方法似乎都不起作用（可能是因为它对块元素不起作用？）

列表的长度可能不同，因此我无法确定每列中有多少项，因此我也无法确定user:nth-of-type（）

有人知道这是否可以做到（或者反过来说，如果绝对不能做到的话？）

我的HTML

<ul>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
  ...
</ul>

---

如果跨越多个列的

ul

是相同的，则列中的项目数量可能会有所不同。那我就没办法了。至少不能只使用CSS

我会将列设置为固定数量的项目，并使用

：n*伪选择器

，或者将列拆分为不同的

ul

标记，并设置第一个

li

的样式

如果您想使用jQuery或类似工具，您可以将第一个

li

作为目标，找到它的

top

位置，然后迭代其他位置，如果

top

位置匹配，则添加边框

编辑 这个JSFIDLE是一个解决方案，但它确实使用了jQuery：

共有四列：

共有三列：

---

查看代码后编辑，1小时后编辑：完成！使用纯CSS

我花了很长时间，因为我不想使用javascript。下面是幕后真实情况的演示，下面是工作版本：。如果你什么都不懂，尽管问吧，因为它没有很好的文档记录。实际上，我必须添加一个div来包装“ul”，因为

ul

上的

overflow:hidden

不会表现为

边框顶部

在元素之外。这是工作代码：

<div>
  <ul>
    <li><a href="">List item 1</a></li>
    <li><a href="">List item 2</a></li>
    <li><a href="">List item 3</a></li>
    <li><a href="">List item 4</a></li>
    <li><a href="">List item 5</a></li>
    <li><a href="">List item 6</a></li>
    <li><a href="">List item 7</a></li>
    <li><a href="">List item 8</a></li>
    <li><a href="">List item 9</a></li>
  </ul>
</div>

和css：

div {
  /* This will hide the white space at the right (blue in the explanation) */
  overflow: hidden;
  }

ul {
  position: relative; /* Needed to place the :before pseudo element in the proper position */
  list-style: none;
  border-top: 1px dotted #000;
  padding: 0;
  margin: 0;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  }

/* This 'cuts' the top margin of ul so it's displayed in the same way as the other */
ul:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;

  /* Put the gaps on the <ul> top margin */
  top: -1px;

  /* Background-size = 1/4 of the width + 1/4 of the space between columns */
  background-size: calc(25% + 5px) 1px;

  /* Or it will hide the border-top of the ul */
  background-color: transparent;

  /* The actual white gaps at the top */
  background-image: linear-gradient(
    90deg,
    transparent calc(100% - 20px), /* All the <li> width minus the gap is transparent */
    red 20px);  /* Those 20px are white */
  }

li {
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -mx-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 0;
  border-bottom: 1px dotted #000;
  }

/* This will hide the top margin of the last columns without elements */
li:last-child:before {
  position: absolute;
  /* You want to place the top  */
  margin-left: calc(25% + 5px);
  content: " ";
  display: block;
  background-color: blue;
  width: 10px;
  height: 1px;
  top: -1px;
  width: 100%;
  }

/* Make the <a> fill the whole space of the <li> */
li a {
  display: block;
  padding: 1em 0;
  }

div{
/*这将隐藏右侧的空白（说明中为蓝色）*/
溢出：隐藏；
}
保险商实验室{
位置：相对；/*需要将：before伪元素放置在正确的位置*/
列表样式：无；
边框顶部：1件带点的#000；
填充：0；
保证金：0；
-moz列数：4；
-webkit列数：4；
列数：4；
-moz柱间距：20px；
-webkit柱间隙：20px；
柱间距：20px；
}
/*这“削减”了ul的上边缘，因此它的显示方式与另一个相同*/
ul：以前{
内容：“；
位置：绝对位置；
显示：块；
宽度：100%；
高度：1px；
/*将间隙放在
上页边距上*/
顶部：-1px；
/*背景尺寸=宽度的1/4+列之间空间的1/4*/
背景尺寸：calc（25%+5px）1px；
/*否则它将隐藏ul的边框顶部*/
背景色：透明；
/*顶部的实际白色间隙*/
背景图像：线性梯度(
90度，
透明计算（100%-20px），/*所有
宽度减去间隙都是透明的*/
红色20px）；/*那些20px是白色的*/
}
李{
-莫兹柱内折：避免；
-webkit列内部中断：避免；
-mx柱内部破裂：避免；
内柱断裂：避免；
填充：0；
边框底部：1个点#000；
}
/*这将隐藏没有元素的最后一列的上边距*/
李：最后一个孩子：以前{
位置：绝对位置；
/*你想把顶部*/
左边距：计算（25%+5px）；
内容：“；
显示：块；
背景颜色：蓝色；
宽度：10px；
高度：1px；
顶部：-1px；
宽度：100%；
}
/*做出决定

同样，工作演示：.
添加
边框顶部：1px点#000；
边缘底部：-1px到您的li样式

CSS3多列模型的工作方式是在内容框和内容之间创建一种新型容器，称为列框

不幸的是，报告明确指出：

无法在列框上设置属性/值。例如，无法设置某个列框的背景，并且列框没有填充、边距或边框的概念

因此，目前，没有列框或其中的元素的选择器，尽管同一页打开了将来可能包含此类内容的可能性（我无法理解为什么他们没有想到将其包含在当前规范中）

由于您声明无法编辑服务器端输出，因此需要使用Javascript。我看到一个解决方案已经提出，尽管我不同意计算
li:first child
的最高位置的方法。相反，我建议：

var liNum  = $('ul.columns li').length; // This computes the number of list items
var colNum = 4;                        // This is the number of columns you want

$('ul.columns li').each(function(i) {
    if ( i % Math.ceil(liNum/colNum) === 0 ) {
        $(this).addClass('top');
    }
});


当然，它有点长，但不依赖于计算的顶部位置（这是一个视觉属性）或
li
是
:first child。相反，它依赖于列表中元素的数量，我认为这是一个重要的数字

当然，这是假设您知道有多少列（正如您所说的）。如果您不想依赖该信息，您可以只计算该CSS：

var colNum = $('ul.columns').css('column-count')

另外，如果您只想将边框添加到顶部，而不想设置任何其他样式，我可能会直接通过该方法编辑css，而不是添加类。如果您需要将top元素作为更多样式或其他用途的目标（例如进一步的JS），那么我将添加该类。但这确实是一个偏好问题。
请发布您的代码。是多个列表彼此相邻，还是全部一个列表贯穿3列？您是否总是有3列sta
var colNum = $('ul.columns').css('column-count')