1

根据http://www.w3.org/TR/2001/CR-css3-selectors-20011113/选择器E ~ F匹配“一个 F 元素前面有一个 E 元素”。我很困惑这是否意味着只有一个 F，或者任何以 E 开头的 F。

例如，选择器是否应该：

E ~ F.blah

仅匹配第一个 F ，它前面是 E 并且具有类“blah”，还是所有此类元素？

4

1 回答 1

3

只要它们在同一个父级下，它就会匹配任何和所有此类元素。

与相邻的兄弟组合器不同+，一般的兄弟组合~器不需要一个元素紧跟另一个元素。由于没有这样的位置限制，~因此不携带任何首次匹配语义。（事实上​​，两者都没有+，但在这个意义上它仍然受到更多限制；见下文。）

这也意味着如果一个元素匹配E + F.blah，它也必须按照定义匹配E ~ F.blah。相反，并非每个元素匹配E ~ F.blah也会匹配E + F.blah。

插图：

<E></E>
<D>
    <F class="blah"></F> <!-- Not selected [1] -->
    <E></E>
    <F class="blah"></F> <!-- E + F.blah, E ~ F.blah [2] -->
    <F class="blah"></F> <!-- E ~ F.blah only [3] -->
    <F></F>
    <F class="blah"></F> <!-- E ~ F.blah only [3] -->
    <E></E>
    <F class="blah"></F> <!-- E + F.blah, E ~ F.blah [4] -->
</D>
<D>
    <F class="blah"></F> <!-- Not selected [5] -->
</D>

选择了什么，没有选择什么：

  1. 未选中
    此 F 元素具有类“blah”，但其父 D 中没有前面的 E 元素。

    请注意，最上面的 E 是 D 的前一个兄弟，而不是 F，因此不计算在内。

  2. 由E + F.blahandE ~ F.blah
    选择 此 F 元素在其父 D 中的 E 元素之前，并且它具有类“blah”，因此它与选择器匹配E ~ F.blah。

    由于 E 元素位于此 F 元素之前，因此它也匹配E + F.blah.

  3. E ~ F.blah仅
    由此 F 元素选择E其父 D 中的元素，并且它具有类“blah”。但是，在这种情况下， E 不再是紧接在前的同级元素，该元素将不匹配E + F.blah。

  4. 由E + F.blahandE ~ F.blah
    选择 虽然第一个 E 元素并不紧接在此 F 元素之前，但第二个 E 元素确实出现在它之前，因此它也匹配E + F.blah。

    顺便说一句，这个元素将匹配 selectorE:first-of-type ~ F.blah 但不匹配selector E:first-of-type + F.blah，因为它前面的兄弟 E 不是其类型的第一个，而是第二个。

  5. 未选中
    此 F 元素具有类“blah”，但其父 D 中没有任何 E 元素，因为它与示例中的所有 E 元素位于不同的父 D 中（并且是其唯一的子元素）。

对于它的价值，不可能只选择第一个匹配的元素E ~ F.blah（除非它也匹配E + F.blah，在这种情况下你可以只使用它）。但是，如果您正在应用 CSS 规则，则可以使用覆盖来实现 - 只需重复兄弟组合器：

E ~ F.blah {
    /* Styles for first and following E ~ F.blah */
}

E ~ F.blah ~ F.blah {
    /* Styles for only F.blah following the first E ~ F.blah */
}
于 2012-10-20T08:47:21.227 回答