Question

标题很丰富，而这正是我想要完成的。我需要定位不存在类的第一个实例-在这种情况下，我试图隐藏＃3中的跨度。这必须是动态的，因为它不一定总是＃3。我尝试和:not和:nth-of-type一起偷偷摸摸，但那是错误的。

 <style>
   li:not(.done):nth-of-type(1).span.divider {display:none}
 </style>

 <-- 1 -->
 <li class="wrapper done"><span class="divider"></span></li>
 <-- 2 -->
 <li class="wrapper done"><span class="divider"></span></li>
 <-- 3 - hide this span -->
 <li class="wrapper"><span class="divider"></span></li>
 <-- 4 -->
 <li class="wrapper"><span class="divider"></span></li>
 <-- 5 -->
 <li class="wrapper"><span class="divider"></span></li>

Answer 1

我认为您需要为此使用两个选择器：

/*hide all the element after .done selector without done*/
li.done ~ li:not(.done) {
  display:none;
}

/*show all the element after the first one without .done*/
li.done ~ li:not(.done) ~ li {
  display:list-item;
}

<ul>
  <!-- 1 -->
  <li class="wrapper done"><span class="divider">1</span></li>
  <!-- 2 -->
  <li class="wrapper done"><span class="divider">2</span></li>
  <!-- 3 - hide this span -->
  <li class="wrapper"><span class="divider">3</span></li>
  <!-- 4 -->
  <li class="wrapper"><span class="divider">4</span></li>
  <!-- 5 -->
  <li class="wrapper"><span class="divider">5</span></li>
</ul>

Answer 2

如果它总是要放在类.done的某个元素之后，则应该可以使用：li.done + li:not(.done) .divider { display:none; }

Answer 3

我对这个问题的处理方法是使用两个单独的规则；一种是为 all 设置缺少给定类名的元素的样式，另一种是覆盖所有缺少给定类名的元素的样式，这些元素跟在缺少该类名的元素之后：

/* Selects all <li> elements with the 'wrapper'
   class-name that does not have the 'done' class: */
li.wrapper:not(.done) {
  color: limegreen;
}

/* Selects all elements, as above, that follow an
   element without the 'done' class-name; effectively
   we style the first occurrence using the above rule
   because the first occurrence - obviously - cannot
   be a general (later) sibling of a matching element: */
li.wrapper:not(.done)~li.wrapper:not(.done) {
  color: red;
}

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  width: 95vw;
  margin: 0 auto;
}

li {
  flex: 1 1 150px;
  margin: 0.2em;
  height: 10vh;
  text-align: center;
  line-height: 10vh;
  border: 1px solid #000;
}

li.wrapper:not(.done) {
  color: limegreen;
}

li.wrapper:not(.done)~li.wrapper:not(.done) {
  color: red;
}

<ul>
  <li class="wrapper done">&lt;li&gt;: 1</li>
  <li class="wrapper done">&lt;li&gt;: 2</li>
  <li class="wrapper done">&lt;li&gt;: 3</li>
  <li class="wrapper">&lt;li&gt;: 4</li>
  <li class="wrapper">&lt;li&gt;: 5</li>
  <li class="wrapper">&lt;li&gt;: 6</li>
  <li class="wrapper">&lt;li&gt;: 7</li>
  <li class="wrapper">&lt;li&gt;: 8</li>
  <li class="wrapper">&lt;li&gt;: 9</li>
  <li class="wrapper">&lt;li&gt;: 10</li>
</ul>

参考文献：

针对没有特定班级的父母中的第一个孩子

3 个答案: