Question

是否有一个css选择器用于突出显示相同类的相邻最后两个元素

在下面的代码中，前3个和后2个元素具有相同的类。但我想强调Two, Threee和Six, Seven

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

Answer 1

鉴于您不想突出显示的类a的唯一元素是第一个：

.a:not(:first-of-type) {
    color: pink;
}

Answer 2

你走了：

li:first-child ~ .a {
  background-color: red;
}

Answer 3

您可以使用nth-child选择器

定位

ul li:nth-child(2), 
ul li:nth-child(3), 
ul li:nth-child(6), 
ul li:nth-child(7) { color: #a00; font-weight: bold; }

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

.a

或者只是忽略第一个类ul li.a:not(:first-of-type) { color: #a00; font-weight: bold; }元素：

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

struct in_addr addr;
int ip = inet_aton(stringAddress, &addr);

Answer 4

简短回答：

使用相同的类突出显示相邻的最后两个元素

您需要以下选择器：

.a:nth-last-child(2),
.a:nth-last-child(2) + .a {
  ...
}

为了证明它按预期工作，这里有一个包含两个无序列表的演示。看看第一个如何受到影响，因为它有两个相邻的元素，最后有相同的类。

＆＃13;

.a:nth-last-child(2),
.a:nth-last-child(2) + .a {
  color: blue;
  background: #cce5ff;
}

＆＃13;

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li class="a">Seven</li>
  <li>Eight</li>
  <li class="a">Nine</li>
</ul>

＆＃13;

其他选区：

在父元素内选择具有给定类和前两个元素的前两个元素。

＆＃13;

.a:nth-child(2),
.a:nth-child(3),
.a:nth-last-child(2),
.a:nth-last-child(2) + .a {
  color: blue;
  background: #cce5ff;
}

＆＃13;

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="a">Eight</li>
  <li class="a">Nine</li>
</ul>

＆＃13;

在父元素内选择除第一个之外的给定类的所有元素。

＆＃13;

.a:not(:first-child) {
  color: blue;
  background: #cce5ff;
}
/*
    Works the same as .a:not(:first-child) 
*/

.a:not(:nth-child(1)) {
  font-weight: bold;
}

＆＃13;

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="a">Eight</li>
  <li class="a">Nine</li>
</ul>

＆＃13;

如果他们的子节点等于选择器的子节点，则选择给定类的第2，第3，第6和第7个元素。 （请注意它是如何工作的对于第二个无序列表。）

＆＃13;

.a:nth-child(2),
.a:nth-child(3),
.a:nth-child(6),
.a:nth-child(7) {
  color: blue;
  background: #cce5ff;
}

＆＃13;

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="a">Six</li>
  <li class="a">Seven</li>
</ul>

<ul>
  <li class="a">One</li>
  <li class="a">Two</li>
  <li class="a">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="a">Eight</li>
  <li class="a">Nine</li>
</ul>

＆＃13;

Answer 5

可能你可以试试这个：

.a {
  background: yellow;
}
 
.a:first-child {
  background: initial;
}

<ul>
      <li class="a">One</li>
      <li class="a">Two</li>
      <li class="a">Three</li>
      <li>Four</li>
      <li>Five</li>
      <li class="a">Six</li>
      <li class="a">Seven</li>
    </ul>

css选择器用于标识具有相同类的相邻元素

5 个答案: