在网页布局中，多层嵌套的div结构是非常常见的设计，当我们需要修改其中某一层或者某一个特定的嵌套div样式时，如果选择器使用不当，很容易导致样式误应用到其他层级的div上，出现样式混乱的问题。掌握合适的CSS选择器用法，就能精准定位到目标元素，完成样式修改。
常用的精准定位嵌套div的CSS选择器
1. 后代选择器
后代选择器用于选择某个元素内部的所有指定后代元素，不管嵌套层级有多深，语法是祖先元素 后代元素，中间用空格分隔。比如我们要修改class为outer的div内部所有class为inner的div的背景色，就可以使用这种方式。
/* 选择outer类div内部所有inner类的div */
.outer .inner {
background-color: #f0f0f0;
padding: 10px;
}
2. 子元素选择器
子元素选择器只会选择某个元素的直接子元素，不会匹配更深层级的后代元素，语法是父元素 > 子元素，使用大于号连接。如果只想修改outer的直接子级innerdiv，而不影响inner内部的嵌套innerdiv，就可以用这个选择器。
/* 选择outer类div的直接子级inner类div */
.outer > .inner {
border: 1px solid #ccc;
margin-bottom: 10px;
}
3. 相邻兄弟选择器
相邻兄弟选择器用于选择紧接在某个元素后面的第一个兄弟元素，语法是元素1 + 元素2。比如我们要修改紧跟在headerdiv后面的第一个contentdiv的样式，就可以使用这个选择器。
/* 选择紧跟在header类div后的第一个content类div */
.header + .content {
margin-top: 20px;
font-size: 16px;
}
4. 属性选择器结合层级使用
如果嵌套div有特定的属性，我们可以结合属性选择器来精准定位，比如选择data-level属性为2的嵌套div。
/* 选择data-level属性为2的div，且是outer类的后代 */
.outer div[data-level="2"] {
color: #ff6600;
font-weight: bold;
}
选择器优先级注意事项
当多个选择器都匹配到同一个嵌套div时，会按照优先级规则应用样式，优先级从高到低大致是：内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器。如果优先级相同，后面的样式会覆盖前面的样式。
我们可以通过计算选择器的权重来判断优先级，ID选择器权重为100，类选择器、属性选择器、伪类选择器权重为10，元素选择器、伪元素选择器权重为1，后代选择器的权重是各个部分权重的和。比如.outer .inner的权重是10+10=20，div.inner的权重是1+10=11，前者优先级更高。
完整示例代码
下面是一个嵌套div的HTML结构和对应的CSS样式修改示例，演示如何精准修改不同层级的嵌套div样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>嵌套div样式修改示例</title>
<style>
/* 外层div样式 */
.outer {
width: 500px;
margin: 20px auto;
}
/* 外层div的直接子级inner样式 */
.outer > .inner {
border: 2px solid #333;
padding: 15px;
margin-bottom: 15px;
}
/* 外层div内所有inner类div的背景色 */
.outer .inner {
background-color: #fafafa;
}
/* 第二层嵌套的inner样式 */
.outer .inner .inner {
background-color: #e8f4ff;
border-color: #66b1ff;
}
/* data-level为3的div样式 */
.outer div[data-level="3"] {
color: #f5222d;
font-size: 14px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
第一层嵌套div
<div class="inner">
第二层嵌套div
<div data-level="3">
第三层嵌套div，带data-level属性
</div>
</div>
</div>
<div class="inner">
另一个第一层嵌套div
</div>
</div>
</body>
</html>
通过上述选择器的组合使用，我们就可以精准定位到任意层级的嵌套div，完成对应的样式修改，避免样式误应用到不需要的元素上，提升样式开发的准确性。