CSS父选择器嵌套子选择器

马黑黑

CSS设置子元素的样式，常规的写法是这样：

/* CSS 代码 */
.papa { /* 父元素属性集 */ }
.papa .son { /* 子元素属性集 */ }
	

现在可以是这样：

/* CSS 代码 */
.papa {
    /* 父元素属性集 */
    .son { /* 子元素属性集 */ }
}
	

第二种写法父选择器嵌套了子选择器，好处是子选择器不用重复使用父选择器做前缀，同时父子选择器的逻辑关系更为清晰。下面的实例是一个 div 标签包含若干个 img 标签，对应的 CSS 选择器采用嵌套写法，可以在线预览效果：

<style>
    .rot-div {
        margin: auto;
        width: 800px;
        height: 800px;
        border: 1px solid gray;
        display: grid;
        place-items: start center;
        position: relative;

        img {
            position: absolute;
            width: 50%;
            transform-origin: 50% 100%;
            transform: rotate(var(--a));
        }

        img:nth-of-type(1) { --a: 0deg; }
        img:nth-of-type(2) { --a: 72deg; }
        img:nth-of-type(3) { --a: 144deg; }
        img:nth-of-type(4) { --a: 216deg; }
        img:nth-of-type(5) { --a: 278deg; }
    }
</style>

<div class="rot-div">
    <img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt="">
    <img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt="">
    <img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt="">
    <img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt="">
    <img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt="">
</div>
	

CSS父子选择器对标HTML父子容器，父嵌套子的选择器代码书写方法有很多相关知识，本例仅展现了最简单的层面。

也曾年轻

1. <style>
   
2.     .rot-div {
   
3.         margin: auto;
   
4.         width: 800px;
   
5.         height: 800px;
   
6.         border: 1px solid gray;
   
7.         display: grid;
   
8.         place-items: start center;
   
9.         position: relative;
   
10. 
    
11.         img {
    
12.             position: absolute;
    
13.             width: 50%;
    
14.             transform-origin: 50% 100%;
    
15.             transform: rotate(var(--a));
    
16.             
    
17.             &:nth-of-type(1) { --a: 0deg; }
    
18.             &:nth-of-type(2) { --a: 72deg; }
    
19.             &:nth-of-type(3) { --a: 144deg; }
    
20.             &:nth-of-type(4) { --a: 216deg; }
    
21.             &:nth-of-type(5) { --a: 278deg; }
    
22.         }
    
23. 
    
24.     }
    
25. </style>
    

复制代码

梦江南

谢谢黑黑老师，长知识了。

霜染枫丹

马老师晚上好！这样拆解开的教程对我特别有用，很难得，很感谢！祝您夏安

马黑黑

霜染枫丹 发表于 2026-6-3 20:39
马老师晚上好！这样拆解开的教程对我特别有用，很难得，很感谢！祝您夏安

晚上嚎

马黑黑

梦江南 发表于 2026-6-3 15:12
谢谢黑黑老师，长知识了。

晚上嚎

马黑黑

也曾年轻 发表于 2026-6-3 13:33

这是过去 SASS/LESS 预处理器才有的写法，非常精妙