不是首先选择所有的特定数据属性的类型

debugcn 发表于 Dev

Kawnah

考虑以下情况：

h2[data-glossary-letter="A"]:not(:first-of-type) {
  display: none;
}
    
h2[data-glossary-letter="B"]:not(:first-of-type) {
  display: none;
}
    
h2[data-glossary-letter="C"]:not(:first-of-type) {
  display: none;
}

<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>

我需要做的是，隐藏每个数据字母属性中的第一个h2，除了第一个。由于我不明白的原因，它隐藏了除第一个以外的所有内容。

输出需要是：

A
B
C

：not（：first-child）和：not（：first-of-type）不起作用

那是因为他们不是兄弟姐妹。

如果将：not选择器更改为父div，它将起作用。

我对这个选择器的理解是，它只是同级。我要说的背后的逻辑是“对于具有此属性的特定标头，不是第一个的标头，请将其隐藏”

但是我正在尝试的方法不起作用。

我想做的事可能吗？如果是这样，应该如何处理。

奥斯卡·格罗斯（Oskar Grosser）

该:first-of-type-selector只着眼于类型，顾名思义。

一种解决方案是使用相同的选择器隐藏任何后续元素，这意味着它将不适用于第一个元素。
如果只想隐藏紧随其后的元素，请使用+-selector而不是~-selector。

h2[data-glossary-letter="A"] ~ h2[data-glossary-letter="A"] {
  display: none;
}
h2[data-glossary-letter="B"] ~ h2[data-glossary-letter="B"] {
  display: none;
}
h2[data-glossary-letter="C"] ~ h2[data-glossary-letter="C"] {
  display: none;
}

<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="A">A</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="B">B</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>
<h2 data-glossary-letter="C">C</h2>

万一我没有正确解释，已经有一个更好的解释了。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。