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

【问题标题】：CSS - Different Style on first class element of a pageCSS - 页面第一类元素的不同样式
【发布时间】：2021-01-12 21:39:06
【问题描述】：

我正在尝试做类似的事情：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;}

但这对我不起作用。

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

谢谢！

【问题讨论】：

标签： css css-selectors styles

【解决方案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>

【讨论】：

你能提供一个minimal reproducible example吗？
这是我需要使用的方法stackoverflow.com/a/8539107/1743291
看不到你的代码，不可能帮你

【解决方案2】：

假设您在父部分中有三个 div，如下所示：

<section class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</section>

在你的 CSS 上，你有那些类名为“child”的 div 的样式：

.parent .child{
    border:0;
}

您可以像这样为第一个 div 赋予特定属性：

.parent .child:first-child{
    border: 1px solid #000000;
}

或者选择你想要的孩子：

.parent .child:nth-child(3){
    border:1px solid #ffffff;
}

【讨论】：

没有用。我需要这样做才能工作：stackoverflow.com/a/8539107/1743291
好吧，我不明白你需要什么......在你传递的链接中，通过 > 和 ~ 选择器很好地解释了如何做到这一点。

【解决方案3】：

如果我理解正确，您只想区分第一个元素。我认为解决方案可以使用伪类第一类

HTML

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

CSS

.item {
  color: red;
  font-size: 32px;
}

.item:first-of-type {
  color: blue
}

https://codepen.io/smil3cz/pen/GRjYyyL

【讨论】：