Question

我有这样的div

<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格式说明书中的一小部分。所以，我们走了。

      section.toggle.active > label {
         background: none repeat scroll 0 0 #F4F4F4; /* gray color behind the label.*/
         border-color: green;
         color: black; /*label color ( clicked ) */
     }

     section.toggle label {
         border-left-color: #0088CC;
         color: red;
     }

如您所见，它只是为toggle标记中定义的section类设置样式。

问题如下！

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

我想，也许一个很好的解决办法就是将这些HTML包装成这样的div;

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

然后我可以将redzone改为......

<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 {
         ...
    }

基本上，我刚刚添加了#greenzone或#redzone来进一步限定样式表说明。

这种语法有问题吗？

Answer 1

您的课程在这里说toogle没有切换您是否剪切并粘贴了此片段或重新输入？

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

样式HTML5节标记不同于div到div

1 个答案: