不是选择所有特定数据属性的第一个类型[重复]

Question

考虑以下情况：

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) and :not(:first-of-type) not working

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

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

我对这个选择器的理解是它只是兄弟。我想说的背后的逻辑是“对于具有此属性的特定标头，不是第一个的标头，隐藏它们”

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

我正在尝试做的事情可能吗？如果是这样，应该如何处理。

Answer 1

Oskar Grosser 的回答肯定是正确的......

只是补充：您可以使用Adjacent sibling combinator(+) 或General sibling combinator(~) :)

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>

Answer 2

顾名思义，: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>

如果我没有正确解释，已经有a better explained answer。