论坛 › 马黑黑教程专版 › CSS父选择器嵌套子选择器

马黑黑 发表于 2026-6-3 12:06

CSS父选择器嵌套子选择器

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
</style>

<div class="artBox">
        <p>CSS设置子元素的样式，常规的写法是这样：</p>
        <div class="hEdiv"><pre class="hEpre">
/* CSS 代码 */
.papa { /* 父元素属性集 */ }
.papa .son { /* 子元素属性集 */ }
        </pre></div>
        <p>现在可以是这样：</p>
        <div class="hEdiv"><pre class="hEpre">
/* CSS 代码 */
.papa {
    /* 父元素属性集 */
    .son { /* 子元素属性集 */ }
}
        </pre></div>
        <p>第二种写法父选择器嵌套了子选择器，好处是子选择器不用重复使用父选择器做前缀，同时父子选择器的逻辑关系更为清晰。下面的实例是一个 div 标签包含若干个 img 标签，对应的 CSS 选择器采用嵌套写法，可以在线预览效果：</p>
        <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    .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; }
    }
&lt;/style&gt;

&lt;div class="rot-div"&gt;
    &lt;img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt=""&gt;
    &lt;img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt=""&gt;
    &lt;img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt=""&gt;
    &lt;img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt=""&gt;
    &lt;img src="https://638183.freep.cn/638183/small/2026/f62.webp" alt=""&gt;
&lt;/div&gt;
        </pre></div>
        <p>CSS父子选择器对标HTML父子容器，父嵌套子的选择器代码书写方法有很多相关知识，本例仅展现了最简单的层面。</p>
</div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
</script>

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

<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));
            
            &:nth-of-type(1) { --a: 0deg; }
            &:nth-of-type(2) { --a: 72deg; }
            &:nth-of-type(3) { --a: 144deg; }
            &:nth-of-type(4) { --a: 216deg; }
            &:nth-of-type(5) { --a: 278deg; }
      }

    }
</style>

梦江南 发表于 2026-6-3 15:12

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

霜染枫丹 发表于 2026-6-3 20:39

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

马黑黑 发表于 2026-6-3 20:42

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

晚上嚎

马黑黑 发表于 2026-6-3 20:42

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

晚上嚎

马黑黑 发表于 2026-6-3 20:43

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


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

红影 发表于 2026-6-4 14:02

这样就可以把多个图片一下子全设置好了，真好。
感谢黑黑的耐心讲解{:4_187:}

马黑黑 发表于 2026-6-4 17:46

红影 发表于 2026-6-4 14:02
这样就可以把多个图片一下子全设置好了，真好。
感谢黑黑的耐心讲解

其实最主要的时逻辑关系问题，这样写不容易出错

杨帆 发表于 2026-6-4 22:15

学习父子选择器新写法 ，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2026-6-4 22:50

杨帆 发表于 2026-6-4 22:15
学习父子选择器新写法 ，谢谢马老师精彩分享

很早以前大家都觉得 CSS 太笨，太罗嗦。将来，CSS 会有新的演变

杨帆 发表于 2026-6-4 22:52

马黑黑 发表于 2026-6-4 22:50
很早以前大家都觉得 CSS 太笨，太罗嗦。将来，CSS 会有新的演变

是，只就这个父子选择器而言，似乎原来的写法更简洁呢

马黑黑 发表于 2026-6-4 22:55

杨帆 发表于 2026-6-4 22:52
是，只就这个父子选择器而言，似乎原来的写法更简洁呢

常规的写法也不简洁。如果一个属性写一行，大家都一样。嵌套的写法在于不污染，容器选择器内的子选择器隶属于容器（样式对应于HTML父子元素），有隔离的意味

杨帆 发表于 2026-6-4 22:58

马黑黑 发表于 2026-6-4 22:55
常规的写法也不简洁。如果一个属性写一行，大家都一样。嵌套的写法在于不污染，容器选择器内的子选择器隶 ...

是，在与HTML父子元素对应上，更直观

马黑黑 发表于 2026-6-4 23:00

杨帆 发表于 2026-6-4 22:58
是，在与HTML父子元素对应上，更直观

逻辑上直观，同时在更精准地指定子元素的样式的同时可以避免一些意想不到的问题的发生

杨帆 发表于 2026-6-4 23:04

马黑黑 发表于 2026-6-4 23:00
逻辑上直观，同时在更精准地指定子元素的样式的同时可以避免一些意想不到的问题的发生

是，这样的写法优势明显

马黑黑 发表于 2026-6-5 12:23

杨帆 发表于 2026-6-4 23:04
是，这样的写法优势明显

不容易犯错

红影 发表于 2026-6-6 20:44

马黑黑 发表于 2026-6-4 17:46
其实最主要的时逻辑关系问题，这样写不容易出错

嗯，层次非常清晰{:4_204:}

马黑黑 发表于 2026-6-6 21:02

红影 发表于 2026-6-6 20:44
嗯，层次非常清晰

主要是，自选择器就在父选择器的框架内部

红影 发表于 2026-6-6 21:45

马黑黑 发表于 2026-6-6 21:02
主要是，自选择器就在父选择器的框架内部

逻辑关系很清楚。

查看完整版本: CSS父选择器嵌套子选择器