1

我试图始终选择“.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;
 }
4

1 回答 1

3

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

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

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

它是如何工作的：您正在为该类设置样式，然后该类前面的该类的任何实例都被覆盖为 0 margin-left。您可以在此处了解其~工作原理。

于 2013-03-13T14:38:31.627 回答