Question

我在菜单中有一个项目（X），根据用户改变位置，例如：

普通用户：

N | N | N | X | Ñ

管理员用户：

N | N | N | N | X

我需要使用NTH-CHILD选择该项目，该项目没有ID或CLASS或任何字段，这需要使用NTH-CHILD完成，因此使用第一个示例在常规用户菜单中选择项目：

element:nth-child(4)

但是这应该适用于单个选择器中的两种情况

element:nth-child(4 or 5 will always be the same with the algorithm)

Answer 1

如果您有可能将不同的类放入body标记（或更高级别的任何其他标记），具体取决于admin / not-admin状态，您可以通过以下方式对其进行处理：< / p>

.user-page ... element:nth-child(4), .admin-page ... element:nth-child(5) {
   ...
}

Answer 2

必须有一些东西可以区分普通用户和管理员用户，通常是添加到html或body标记的类，如果有，那么你可以使用{{1 }}或nth-child基于父级。

这样的事情：

（使用nth-of-type进行代码段/演示）

＆＃13;

section

＆＃13;

div {
  background: green;
  display: inline-flex
}

.regular div:nth-of-type(4) {
  /* nth-last-of-type(2) */
  background: red
}

.admin div:last-of-type {
  /* or nth-of-type(5) or nth-last-of-type(1)*/
  background: red
}

＆＃13;

Answer 3

选择器根据标记中继的信息匹配元素。 This information does not include text content.这就是为什么Johannes和dippas建议在正文或其他元素中添加适当的类名 - 因为这正是类所适用的类型。

如果您的标记没有根据用户是普通用户还是管理员进行区分，那么就CSS而言，您的标记在任何一种情况下都是相同的，并且您无法做任何事情来确保你的选择器总是匹配正确的元素。

使用CSS选择变化位置NTH子项

3 个答案: