Question

我正在尝试始终选择带有“.chartKeyListItem”类的第一个元素。它位于父“chartKey”下。所以这对于第一个子选择器来说效果很好，如果它是第一个元素，但有时候我有3个项目，所以我必须使用nth-selector（4）这适用于该实例。但我的代码应该能够处理两者而不会破坏彼此。（如果两个CSS类都被加载，它会这样做，因为它的第一个实例是第一个和第四个“chartKeyListItem”）有没有办法只选择第一个“.chartKeyListItem”？

此外，chartKeyListItem div的数量不明确，可以是2到20之间的任何地方，MinMax标签只会出现在某些页面上，但CSS需要能够处理它们何时存在以及何时存在不是......

以下代码：实例1：

<div class='chartKey'>"
    <div class='chartKeyListItem'> //Just want to add margin to this one
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'> //THIS ONE GETS BOTH CLASSES WHICH I DONT WANT
</div>

实例2：

<div class='chartKey'>"
    <div class='pollResultsMinMaxLabel' style='width:auto;float:left;margin-left:20px;'>Min</div>
    <div class='pollResultsMinMaxLabel' style='width:auto;float:left;margin-left:20px;'>Max</div>
    <br/>
    <div class='chartKeyListItem'> //Just want to add margin to this one
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'> //This one will get both class too
</div>

CSS：

.chartKeyListItem:first-child{
     margin-left: 60px !important;
 }
.chartKeyListItem:nth-child(4) {
     margin-left: 60px !important;
 }

Answer 1

为此，你需要某种first-of-class选择器，遗憾的是我们还没有。但是，你可以达到同样的效果:)

.chartKeyListItem {
   margin-left: 60px !important;
}

.chartKeyListItem ~ .chartKeyListItem {
   margin-left: 0 !important;
}

它是如何工作的：你正在为这个类设置样式，然后该类前面的那个类的任何实例都被写成0左边距。您可以了解~的工作原理here。

在不知道父级下的位置的情况下选择了类的第一个实例

1 个答案: