<think>我们需要获取
一个元素中的多个
div中的最后
一个div。在
CSS中，我们可以使用伪类选择器来实现。
常见的伪类选择器有:first-child、:last-child、:nth-child(n)等。
这里我们要选择最后
一个div，可以使用:last-child或者:nth-last-child(1)。
但是注意：如果父元素下的子元素不仅仅是
div，还有其他元素，那么我们需要确保我们选择的是最后
一个div，而不一定是最后
一个子元素（因为最后
一个子元素可能不是
div）。
因此，我们可以使用:last-of-type，它选择的是父元素下同类型元素中的最后
一个。
所以，我们可以这样写：
父元素 >
div:last-of-type
例如，如果我们的
HTML结构如下：
<
div class="container">
<
div>第
一个div</
div>
<
div>第二个
div</
div>
<p>
一个段落</p>
<
div>第三个
div</
div> <
!-- 我们想要这个 -->
</
div>
使用.container >
div:last-of-type 将会选择到第三个
div，因为它是.container中所有
div的最后
一个。
但是，如果我们的结构是：
<
div class="container">
<
div>第
一个div</
div>
<
div>第二个
div</
div>
<p>
一个段落</p>
</
div>
那么.container >
div:last-of-type 将会选择第二个
div，因为它是最后
一个div。
所以，根据需求，我们使用:last-of-type可以满足选择最后
一个div。
另外，如果父元素下的子元素
只有div，没有其他元素，那么:last-child也可以，因为最后
一个子元素就是
div。但是为了通用性（即在一组兄弟元素中，不管最后是不是有其他标签，我们都要最后
一个div），使用:last-of-type更合适。
下面是
一个CSS选择器的示例：
假设
HTML结构为：
<
div id="parent">
<
div>
div1</
div>
<
div>
div2</
div>
<span>span</span>
<
div>
div3</
div> <
!-- 目标 -->
</
div>
我们可以这样写：
#parent
div:last-of-type {
/* 样式 */
}
这样就会选中
div3。
但是，如果目标元素不是直接子元素，而是可能嵌套在其他元素内，那么我们需要使用其他方法，比如使用后代选择器，但这样可能会选中多个。所以这里我们假设都是直接子元素。
如果我们需要在JavaScript中获取，可以使用querySelector：
let last
Div = document.querySelector('#parent
div:last-of-type');
总结：使用
CSS选择器 `
div:last-of-type` 可以选中父元素下同类型元素中的最后
一个div。
代码示例（
HTML和
CSS）：
```
html
<
!DOCTYPE
html>
<
html>
<head>
<style>
.container
div:last-of-type {
background-color: yellow;
}
</style>
</head>
<body>
<
div class="container">
<
div>第
一个div，没有背景色</
div>
<
div>第二个
div，没有背景色</
div>
<p>
一个段落</p>
<
div>第三个
div，有黄色背景（被选中）</
div>
</
div>
</body>
</
html>
```
在上述示例中，第三个
div会显示黄色背景。
另外，如果容器中
只有div，没有其他元素，那么:last-child也可以，但:last-of-type更通用。
注意：:last-of-type是
CSS3的选择器，兼容性较好，但在一些非常旧的浏览器（如
IE8及以下）可能不支持。如果需要支持旧浏览器，可能需要使用JavaScript。
使用JavaScript的解决方案（当需要兼容旧浏览器时）：
我们可以获取父元素的所有
div子元素，然后取最后
一个。
例如：
```javascript
var parent = document.getElementById('parent');
var
divs = parent.getElementsByTagName('
div');
var last
Div =
divs[
divs.length - 1];
```
然后可以给last
Div添加样式，或者进行操作。
但是，如果父元素内还有嵌套的
div（即不是直接子元素），那么getElementsByTagName会获取所有后代
div，这样就不准确了。所以我们可以通过判断父元素和子元素的关系来获取直接子元素。
我们可以这样：
```javascript
var parent = document.getElementById('parent');
var children = parent.children;
var last
Div = null;
// 从后往前遍历，找到最后
一个div
for (var i = children.length - 1; i >= 0; i--) {
if (children[i].tagName === '
DIV') {
last
Div = children[i];
break;
}
}
if (last
Div) {
last
Div.style.backgroundColor = 'yellow';
}
```
或者使用querySelector（现代浏览器）：
var last
Div = parent.querySelector('
div:last-of-type');
因为querySelector在父元素上使用是限定在该父元素的后代中。
所以，如果不需要考虑兼容性，使用
CSS选择器是最简单的。
总结：
CSS方案：使用 `:last-of-type`
JavaScript方案（现代浏览器）：`document.querySelector('父元素选择器
div:last-of-type')`
JavaScript方案（兼容旧浏览器）：遍历父元素的子节点，找到最后
一个div。
根据需求选择合适的方法。
现在，按照要求，在最后提出相关问题。</think>要获取
一个元素中的多个
div 中的最后
一个 div，可以使用
CSS 伪类选择器 `:last-of-type`。以下是详细解决方案：
### 解决方案
```
css
/* 选择父元素内所有
div 中的最后
一个 div */
.container
div:last-of-type {
background-color: yellow; /* 示例样式 */
}
```
### 示例代码
```
html
<
!DOCTYPE
html>
<
html>
<head>
<style>
/* 关键选择器 */
.container
div:last-of-type {
background-color: yellow;
padding: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
<
div class="container">
<
div>第
一个div（无样式）</
div>
<
div>第二个
div（无样式）</
div>
<
div>第三个
div（被选中）</
div>
</
div>
</body>
</
html>
```
### 选择器说明
1. **`:last-of-type` 伪类**：
- 选择同级元素中**最后
一个指定类型**的元素（本例中是 `<
div>`）
- 即使元素之间有其他类型的元素（如 `<p>`、`<span>`），也能正确识别最后
一个 div
2. **选择器组合**：
- `.container
div`：选择 `.container` 内所有后代
div
- `:last-of-type`：过滤出最后
一个 div
### 其他场景解决方案
1. **当
div 是直接子元素时**：
```
css
.container >
div:last-of-type { ... }
```
2. **使用通用选择器（包含非
div 元素）**：
```
html
<
div class="container">
<p>段落</p>
<
div>
Div 1</
div>
<span>Span</span>
<
div>最后
一个div（被选中）</
div>
</
div>
```
```
css
.container
div:last-of-type {
/* 仍然有效 */
}
```
3. **JavaScript 替代方案**：
```javascript
// 获取最后
一个 div
const last
Div = document.querySelector('.container
div:last-of-type');
// 或使用节点遍历
const container = document.querySelector('.container');
const
divs = container.getElementsByTagName('
div');
const last
Div =
divs[
divs.length - 1];
```
### 注意事项
- 与 `:last-child` 的区别：`:last-child` 要求元素必须是父级的**最后
一个子元素**，而 `:last-of-type` 只关心同类型元素中的最后
一个
- 浏览器兼容性：所有现代浏览器均支持（
IE9+）
扫一扫
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
