Css 不同div的HTML5节标记样式不同

我有一个像这样的潜水艇

<div class="toogle">
    <section class="toggle active">
        <label>Label 1</label>
        <div class="toggle-content">
            <p>Label 1 content..
        </div>
    </section>
    <section class="toggle active">
        <label>Label 2</label>
        <div class="toggle-content">
            <p>Label 2 content..
        </div>
    </section>
    <section class="toggle">
        <label>Label 3</label>
        <div class="toggle-content">
            <p>Label 3 content..
        </div>
    </section>
</div>

如您所见，它只是对

部分

标记中定义的

切换

类进行样式化

问题如下

如果我放置另一个HTML区域，就像我上面粘贴的那样，会怎么样？因为上面的样式说明是通用的，所以两个区域将由相同的样式表说明驱动。那么，如果我希望内容在第一个HTML区域显示在绿色背景上，在绿色的复制版本中显示在红色背景上，该怎么办

我想，也许一个很好的解决方案是将这些HTML像这样包装到它们自己的div中

<div id='greenzone'>
            <!--first HTML zone here--> 
    <div class="toogle">
            <section class="toggle active"> 
            ..
    ...     
</div>  

基本上，我只是添加了

#greenzone

或

#redzone

来进一步限定样式表指令

---

这个语法有问题吗

您的类在这里说toogle not toggle您是否剪切并粘贴了此片段或重新键入

<div id='greenzone'>
            <!--first HTML zone here--> 
    <div class="toogle"> <-- TOOGLE
            <section class="toggle active"> 
            ..
    ...     
</div>  

你是想设计#绿区和#红区的背景还是其中的标签？老实说，我很不明白你到底需要什么。根据标题-您希望每个部分都根据包装它的div进行不同的样式设置吗？为什么不在点上使用.parent-div.section:nth child（1,2,3…nth）呢。那只是个打字错误。所以我的方法一直都是正确的。我只是打了个错字。谢谢你的关注。不用担心，我一直都在经历这样的事情；o）
<div id='redzone'>
            <!--duplicated HTML zone here--> 
    <div class="toogle">
            <section class="toggle active"> 
            ..
    ...     
</div>  

#greenzone section.toggle.active > label {
         ...
    }

#redzone section.toggle.active > label {
         ...
    }

<div id='greenzone'>
            <!--first HTML zone here--> 
    <div class="toogle"> <-- TOOGLE
            <section class="toggle active"> 
            ..
    ...     
</div>