Question

我想仅为单个页面设置.col元素的样式。如果我在我的css文件中包含：

.col {
        border: 1px solid #7851A9;
      }

然后页面将被设置样式，但另一个页面上的元素也将被设置样式，我不希望这样做。

我尝试将它们设置为内联样式，但它不起作用，我相信我的语法是错误的。但是内联样式也是错误的。

如何制作一个特定的css元素，以便它只设置特定元素而不是所有.col的样式？我知道我的问题是非常基本的css，但是我花了好几个小时寻找和尝试不同的方法，但直到现在都没有运气

<div ng-repeat="module in modules">
            <div class="row">
                <div class="col" style="border: 1px solid #7851A;" ><h5 style="color:#000000;text-align:center;">{{module}}</h5></div>
            </div>
            <div class="row">
                <div class="col col-50" style="border:1px;"><h5 style="color:#000000;text-align:center;">Module Mark</h5></div>
                <div class="col col-50" style="border:1px solid #7851A;"><h5 style="color:#000000;text-align:center;">{{GenerateRandomMarks[$index]}}</h5></div>
            </div>
            <br>
            <br>
        </div>

Answer 1

你可以给那个页面一个像＆＃34; col-style＆＃34;或者你喜欢的任何东西，然后以某种方式对该类中的任何东西进行样式：

.col-style .col { border: 1px solid #7851AA; }

确保您也取出其他内联样式，如果您只想设置此页面，请将它们放在全局工作表或上面的.col样式表中。

Answer 2

这个怎么样：

.mycol {
        border: 1px solid #7851A9;
      }

<div ng-repeat="module in modules">
            <div class="row">
                <div class="col mycol" ><h5 style="color:#000000;text-align:center;">{{module}}</h5></div>
            </div>
            <div class="row">
            <div class="col col-50" style="border:1px;"><h5 style="color:#000000;text-align:center;">Module Mark</h5></div>
                <div class="col col-50" style="border:1px solid #7851A;"><h5 style="color:#000000;text-align:center;">{{GenerateRandomMarks[$index]}}</h5>      </div>
            </div>
            <br>
           <br>
       </div>

Answer 3

在该特定页面上如何在col旁边添加另一个类？喜欢

<div class="col specificStyle"></div>

然后申请

.specificStyle {
    color: red;
}

如果你以相同的方式定义它们，那些样式将覆盖.col。

Answer 4

您可以将该课程编入该页面的<body标记，例如

<body class="page5">

然后你可以设置一个使用组合选择器的CSS规则：body类和你的.col类，比如

.page5 .col {
   border: 1px solid #7851A9;
 }

这样，该类只适用于该页面上的.col元素。

.col元素的内联样式

4 个答案: