如何在同一页面中有两种不同的样式答案

【问题标题】：How can I have two different styles in the same page如何在同一页面中有两种不同的样式
【发布时间】：2017-05-04 17:34:22
【问题描述】：

我在循环中有两个 DIV，我需要将一个样式放在一个 DIV 上。

我不知道我是否可以用 PHP、JS 或 CSS 做到这一点。这是我的代码：

-- 样式（这个样式在同一个页面，因为我有一个通用的样式，我包括在内）--

    <?php
    $style_1 = '<style>
        .content .postcontent-0 .layout-item-0 { margin-bottom: 7px;  }
        .content .postcontent-0 .layout-item-1 { border-spacing: 10px 0px; border-collapse: separate;  }
        .content .postcontent-0 .layout-item-2 { border-top-style:solid; background: #ffffff;  }

    </style>';

    $style_2 = '<style>
        .content .postcontent-0 .layout-item-0 { color: #083752; background: ;  border-collapse: separate;  }
        .content .postcontent-0 .layout-item-1 { color: #083752;  }
        .content .postcontent-0 .layout-item-2 { border-style:Double; border-radius: 15px;  }
        .content .postcontent-0 .layout-item-3 { padding-right: 10px;padding-left: 10px;  }
          </style>';
    ?>

-- 视图

<?php for ($i = 0; $i < $contador; $i++) { ?>
<!--Here begin the STYLE_1-->
    <div class="content-layout-wrapper layout-item-0">
       <div class="content-layout layout-item-1">
         <div class="content-layout-row">
           <div class="layout-cell layout-item-2">
             <p> Text #1 </p>
           </div>
         </div>
        </div>
     </div>
    <!--Here END the STYLE_1-->

    <!--Here begin the STYLE_2-->
     <div class="postcontent postcontent-0 clearfix">
        <div class="content-layout-wrapper layout-item-0">
            <div class="content-layout-row">
                 <div class="content-layout layout-item-1">
                       Text #2
                 </div>
                 <div class="layout-cell layout-item-2" >
                     <p>
                      Text #3
                    </p>
                 </div>
            </div>
        </div>
        <div class="content-layout">
             <div class="content-layout-row">
                  <div class="content-layout layout-item-3">
                      <p>Text # 4</p>
                  </div>
             </div>
        </div>
     </div>
<!--Here END the STYLE_2-->

  <?php   } // for i  ?>

【问题讨论】：

您好，您应该使用 id 或 classname 将 css 分配给 div。
你为什么要这样做CSS？您应该为 CSS 代码使用单独的文件。不要在 JS 中这样做
这就是问题所在，所有的div都有不同的样式和相同的名称
那么如何使用循环提供动态 id 并使用这些 id 你应该以相同的方式分配 css
@我总是这样。

标签： php html css styles

【解决方案1】：

您可以为两个单独的 div 使用不同的类名，但如果您想在不更改现有类名的情况下使用它，请使用内联 css。试试这个代码：

<?php for ($i = 0; $i < $contador; $i++) { ?>
<!--Here begin the STYLE_1-->
    <div class="content-layout-wrapper layout-item-0" style="margin-bottom: 7px;">
       <div class="content-layout layout-item-1" style=" border-spacing: 10px 0px; border-collapse: separate; ">
         <div class="content-layout-row">
           <div class="layout-cell layout-item-2" style="border-top-style:solid; background: #ffffff;">
             <p> Text #1 </p>
           </div>
         </div>
        </div>
     </div>
    <!--Here END the STYLE_1-->

    <!--Here begin the STYLE_2-->
     <div class="postcontent postcontent-0 clearfix">
        <div class="content-layout-wrapper layout-item-0" style="color: #083752; background: ;  border-collapse: separate;">
            <div class="content-layout-row">
                 <div class="content-layout layout-item-1" style="color: #083752;">
                       Text #2
                 </div>
                 <div class="layout-cell layout-item-2" style"border-style:Double; border-radius: 15px;">
                     <p>
                      Text #3
                    </p>
                 </div>
            </div>
        </div>
        <div class="content-layout">
             <div class="content-layout-row">
                  <div class="content-layout layout-item-3" style="padding-right: 10px;padding-left: 10px;">
                      <p>Text # 4</p>
                  </div>
             </div>
        </div>
     </div>
<!--Here END the STYLE_2-->

  <?php   } // for i  ?>

【讨论】：

也许这是一个解决方案，但如果我必须更改样式，我必须手动更改所有页面。但是，是的，也许是解决方案。谢谢回答
欢迎，我已经提到，在我的回答中你可以使用不同的类名，因为 HTML 中的内联 CSS 不是一个好习惯。
如果您认为这是您提出问题的正确答案，请以 StackOverflow 程序方式批准我的回答。
我按照你的第一个建议，我改变了班级名称，我想我只是阻止我