可以合成“下一代”吗？

问题描述 投票：0回答：2

遇到使用混合类型元素的大网格的情况，将:next-of-type作为伪类很好。我对它的定义是下一个兄弟，它与附加:next-of-type的选择器选择的元素属于同一类型。 （我认为拥有:next-child，:next-of-class等也是很好的。并且流行儿童，流行型，流行音乐等等）

在CSS文档中找不到这样的东西，所以我猜它不存在。我花了一些时间试图从存在的东西中合成它，然后失败了。

不确定这是否可以解决，可能只有W3 CSS工作组...

例如，假设您有一个大的元素网格。为简单起见，我将在示例中使用两个，但我的实际案例有十几种或更多不同类型的元素。我将按照它们在HTML中存在的顺序对元素内容进行编号，但由于网格放置算法（此处未演示），这些项目实际上可能不会以与HTML中不同的顺序出现。尽管如此，HTML中的项目序列对选择计划很重要。我将使用<a->和<b->作为（自定义）元素。

<div style="display: grid;">
     <a->1</a->
     <a->2</a->
     <b- class="special">3</b->
     <a->4</a->
     <a- class="ordinary">5</a->
     <a- class="surprise">6</a->
     <b->7</b->
     <b->8</b->
     <a->9</a->
</div>

因此，有一种方法可以指定.special:next-of-type并选择项目7，.ordinary:next-of-type将选择项目6，而.surprise:next-of-type将选择项目9。

css css-selectors
2个回答
0
投票

扩展我的评论：

从根本上说，匹配“next”和“previous”元素的伪类将匹配不同的元素，而不是由您“附加”它们的任何复合选择器所代表的元素，因此与CSS的“伪类”定义不兼容或者确实是“简单选择器”/“复合选择器”。

Selectors L4将简单选择器和复合选择器描述为同时匹配单个元素的条件。根据这个定义，像.special:next-of-type这样的选择器只有在该类型的下一个元素也匹配.special时才能工作。它然后递归匹配，导致除了每个父元素中每个元素类型的第一个之外的所有.special ~ .special。重要的是，在你的情况下它根本不起作用，因为第7项与.special不匹配。

一个人类阅读选择器可能直观地理解它的作用，但它仍然没有选择器语法，因为为了它的工作，你需要将:next-of-type定义为一个特殊的伪类，忽略或匹配其余的复合选择器，与规范中定义的方式相反。这意味着选择器匹配算法增加了复杂性。在jQuery's :eq() family of selectors中可以看到类似的复杂性 - 这些选择器可能没有被标准化的充分理由。

另外，像:next-of-type这样的东西不是元素的条件，而是在元素和其他元素之间建立关系。在选择器中，两个或多个不同元素之间的关系用组合子表示。 “类型的下一个兄弟”组合器可以轻松完成这项任务，而不会从根本上改变选择器匹配的工作方式（例如.special ~~ *），但任何选择器规范中都不存在，我看不到像这样的用例足以让CSSWG证明其设计，测试和实施的合理性。如果没有这样的组合器，您需要事先知道元素类型，以确定该类型的下一个兄弟，并且使用今天可用的选择器无法实现，甚至不包括L4 :nth-child(An+B of S)。

所以答案

可以合成“下一代”吗？

是的，不是现在的选择器，并且可以使用现有选择器语法的解决方案是引入具有这种确切功能的组合器。

0
投票

所以它是可能的，但除了知道网格中元素类型的完整列表，以及相同类型的元素之间的最大元素跨度之外，使用宏处理器生成合成将非常方便。解。

下面的代码段仅处理两种类型的元素，并且在相同类型的元素之间最多只有5个元素，但显然可以在任一维度上费力地扩展。

      .container {
        display: grid;
        font-size: 30px;
        grid-template-areas:
          ". . ."
          ". . ."
          ". . .";
      }
      .special ~next-of-type { color: red; }
      a-.special + a- { color: red; }
      a-.special + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      b-.special + b- { color: red; }
      b-.special + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }

      .ordinary ~next-of-type { color: blue; }
      a-.ordinary + a- { color: blue; }
      a-.ordinary + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      b-.ordinary + b- { color: blue; }
      b-.ordinary + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }

      .surprise ~next-of-type { color: orange; }
      a-.surprise + a- { color: orange; }
      a-.surprise + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      b-.surprise + b- { color: orange; }
      b-.surprise + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
    <h1>next-of-type synthesized</h1>
    <div class=container>
     <a->1</a->
     <a->2</a->
     <b- class="special">3</b->
     <a->4</a->
     <a- class="ordinary">5</a->
     <a- class="surprise">6</a->
     <b->7</b->
     <b->8</b->
     <a->9</a->
    </div>

感谢BoltClock表示不可能，以及其他有用的评论让我得到了这个解决方案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.