CSS 视觉 - :not 选择器

2019-07-28

描述

当一组元素中的最后（或特定的）一个元素不需要样式时，:not 选择器就非常有用了。

HTML

<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
​

CSS

.css-not-selector-shortcut {
  display: flex;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0 0.75rem;
}
li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}
​

Demo

说明

li:not(:last-child) 规定了该样式应该应用到除了 :last-child 元素外的所有 li 元素上。

浏览器支持

支持率：99.9%
支持情况：https://caniuse.com/#feat=css-sel3

返回总目录

每天 30 秒系列之 CSS