css - CSS - 页面第一类元素的不同样式

Question

我正在尝试做类似的事情：https ://stackoverflow.com/a/8539107/1743291

我想为类的第一个元素赋予与使用同一类的其他元素不同的样式。

所以我按照上面帖子的解决方法创建了这样的东西：

.kn-menu > .control.has-addons {
border: 1px solid red;}

.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}

但这对我不起作用。

谁能告诉我我的方法有什么问题？

谢谢！

标签： csscss-selectorsstyles

Answer 1

您可以使用first-of-type伪类：

  .test {
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: green;
  }
  .test:first-of-type{
    background-color: red;
  }

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>