Question

我正在构建一个页面，我不知道页面上会有多少元素。通常有两个，所以我有样式来定位第一个元素和最后一个元素。这种方法很有效，直到只有一个元素，然后它才能获得最后的元素样式。

CSS是否有办法确保是否只有一个元素不接收第一个或最后一个元素的样式。如果可能的话，我想尽量避免使用JS。

CSS

.content-box
  .item:first-of-type
    // some styles
  .item.last-of-type
    // some styles

Answer 1

您可以使用:not伪类来匹配第一个元素，如果它不是最后一个元素，反之亦然：

.item:first-of-type:not(:last-of-type) { /* ... */ }
.item:last-of-type:not(:first-of-type) { /* ... */ }

＆＃13;

li:first-of-type:not(:last-of-type) { 
  background: #ff0;
}
li:last-of-type:not(:first-of-type) {
  background: #0f0;
}

＆＃13;

<ul>
  <li>First</li>
  <li>Foo</li>
  <li>Bar</li>
  <li>Last</li>
</ul>
<hr />
<ul>
  <li>First-Last</li>
</ul>

＆＃13;

或者，您可以同时使用:first-of-type和:last-of-type：

.item:first-of-type { /* ... */ }
.item:last-of-type { /* ... */ }
.item:first-of-type:last-of-type { /* Unset styles */ }

＆＃13;

li:first-of-type { 
  background: #ff0;
}
li:last-of-type {
  background: #0f0;
}
li:first-of-type:last-of-type {
  background: transparent;
}

＆＃13;

<ul>
  <li>First</li>
  <li>Foo</li>
  <li>Bar</li>
  <li>Last</li>
</ul>
<hr />
<ul>
  <li>First-Last</li>
</ul>

＆＃13;

仅当有两个或更多元素时才使用last-of-type

1 个答案: