我有以下标记和样式:
[class^="container"] .target:last-of-type {
color:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="target">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<br>
<div class="container-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="target">5</div>
</div>
</body>
</html>
我想选择 .target 元素，但前提是它是其容器中的最后一个。
:last-of-type 类在这种情况下有效，我只是不明白为什么。它不应该同时突出显示 .target 元素吗？它们是其父容器中最后的(也是唯一的)元素。或者我误解了 :last-of-type 选择器？
:last-of-type不寻找类，而是，顾名思义，type如 tag元素的。
这就是为什么它只突出显示第二个容器 div 上的最后一个元素，它在 .target 时应用规则。也变成了 :last-of-type , 即最后一个 div在其容器内。
我已经编辑了你的答案，检查当它是 .item 时它做了什么或 div在 last-of-type 之前标记自己选择器。
[class^="container"] .target:last-of-type {
color:blue;
}
[class^="container"] .item:last-of-type {
text-decoration: underline;
}
[class^="container"] div:last-of-type {
text-indent: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="target">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<br>
<div class="container-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="target">5</div>
</div>
</body>
</html>