Question

有人可以解释为什么：first-of-type和：last-of-type选择器的行为与他们在以下代码段中的行为相同？

HTML

<div class="container">
  <h2 data-type data-type-a>A (should be black / is black)</h2>
  <h2 data-type data-type-a>A (should be red / is black)</h2>
  <h2 data-type data-type-b>B (should be green / is black)</h2>
  <h2 data-type data-type-b>B (should be blue / is blue)</h2>
</div>

CSS

div{
  color:black;
  font-weight:bold;
}

.container h2[data-type]:last-of-type{
  color:blue;
}

.container h2[data-type-a]:last-of-type{
  color:red;
}

.container h2[data-type-b]:first-of-type{
  color:green;
}

Answer 1

df <- structure(list(ID = 1:7, event = c(FALSE, FALSE, FALSE, TRUE, FALSE, TRUE, FALSE), time = structure(c(7305, 7306, 7307, 7308, 7306, 7307, 7307), class = "Date"), group = c(1L, 1L, 1L, 1L, 2L, 2L, 3L)), .Names = c("ID", "event", "time", "group"), row.names = c(NA, -7L), class = "data.frame")和:last-of-type按预期工作：

：last-of-type CSS伪类表示一组兄弟元素中其类型的最后一个元素。
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

问题是此特定选择器定位 :first-of-type 类型的最后一个元素，忽略您的属性选择器。因为类型是h2而不是h2或data-type。

我建议你使用data-type-a，这是它的意思：

＆＃13;

class

＆＃13;

div {
  color: black;
  font-weight: bold;
}

.data-type-b {
  color: green;
}

.data-type-a {
  color: red;
}

.data-type:first-child {
  color: inherit;
}

.data-type:last-child {
  color: blue;
}

＆＃13;

行为：数据属性的最后一个类型选择器

1 个答案: