Question

如果我使用nth-of-type为元素指定样式，则必须将n或数字传递到选择器：nth-of-type(1)。

我很好奇的是：如果我想编写一条能够执行以下所有3条规则的单一规则，那么它是否可能？

我会假设以下内容会给我我需要的结果：

input[type=radio]:nth-of-type(n):checked ~ .item-list div:nth-of-type(n)

我的期望是，n必须在规则的两边都相等。即，当选中复选框1时，列表中的div 1将为粉红色。但这似乎并非如此，而且我发现的唯一方法是使这项工作难以编码。

＆＃13;

input[type=radio]:nth-of-type(1):checked ~ .item-list div:nth-of-type(1),
input[type=radio]:nth-of-type(2):checked ~ .item-list div:nth-of-type(2),
input[type=radio]:nth-of-type(3):checked ~ .item-list div:nth-of-type(3) {
  color: pink;
}

＆＃13;

<input type="radio" name="items" checked />
<input type="radio" name="items" />
<input type="radio" name="items" />

<div class="item-list">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

＆＃13;

对于好奇的人，我尝试这个是因为我使用Spectre CSS放在一起的演示： https://plnkr.co/edit/XmO4wOWgDLWvoiq0XVzG?p=preview

Answer 1

如果您可以更改HTML标记，则可以使用adjacent sibling selectors +

来实现这一目标

＆＃13;

input:checked+div {
  color: pink;
}

＆＃13;

<input type="radio" name="items" checked />
<div>item 1</div>
<input type="radio" name="items" />
<div>item 2</div>
<input type="radio" name="items" />
<div>item 3</div>

＆＃13;

Answer 2

与you can't use backreferences in attribute selectors类似，不可能让一个函数伪类的参数引用另一个函数伪类的参数。

:nth-of-type(n)实际上意味着什么是“任何n”。换句话说，它是具有父元素的任何元素的保证匹配。它就像*，但具有伪类特异性（而不是根元素，但真的分裂头发）。

这意味着

input[type=radio]:nth-of-type(n):checked ~ .item-list div:nth-of-type(n)

等同于（加上两个伪类的额外特异性）

input[type=radio]:checked ~ .item-list div

如dippas所示，能够调整你的标记将使你的生活更轻松，但如果你必须使用你拥有的标记，那么你确实必须对每个数字进行硬编码。

关于预处理器的强制性说明，取自上面的链接：

样式表预处理器（如Sass或LESS）将允许您生成所需的静态CSS规则，但所有这一切都会自动执行单独列出所有可能值的手动任务，这证明了我的第一点。

动态使用nth-of-type

2 个答案: