mar*_*llo 5 css css-selectors css3
我有以下标记和样式:
[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元素的 as 。
这就是为什么它只突出显示第二个容器 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>