这个 css 兄弟选择器是如何工作的？ [复制]

Question

我找到了这段 css 代码，但需要更好地理解它：

.tes>li:not(template)~:not(template) {
  color: red;
}

<ul class="tes">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

样式除第一个之外的所有兄弟。请解释一下，以及浏览器的支持。谢谢

Demo here

Answer 1

.tes>li:not(template)~:not(template) {
  color: red;
}

.tes>li:not(template) - 在.tes 中找到不是template 的第一个li - 不清楚template 是什么

:not() 选择器用于从通用调用中省略一些选择器例如： input:not([type='checkbox']) - 这将计算所有非复选框的输入类型。

:not() 应该在其中包含一个选择器（就像您经常在 css 上使用它一样，即：p:not(.lead) 或如上例中所述。）

~ Is a Subsequent-sibling combinator 基本上就是说，从左侧匹配的兄弟元素开始，检索匹配右侧选择器的所有兄弟元素。

从您的演示中不清楚 template 是什么，但您要求在第一个 li 之后是兄弟姐妹的所有类型的元素，但我猜，在您的示例中它只是忽略了 :not(template) - 因为没有匹配 template 并且正在检索与第一个 li 同级的所有元素。

例如这将达到相同的结果：

.tes>li ~ li  {
  color: red;
}

<ul class="tes">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>