Question

所以我对前端开发相对较新，我要回去清理一堆具有大量内联样式的代码。我想弄清楚的是将多个CSS类选择器或ID选择器应用于单个HTML元素的适当方法。我试图创建一个单一的选择器。将多个类或ID应用于单个元素的正确方法是什么...请注意，它们需要在CSS中分开，因为它们具有不同的属性。

自定义类选择器：

#customModal .modal-open .modal{
    overflow: visible;
}
#customModalDialog .modal-dialog{
    position: fixed;
    left: 60%;
}

CSS示例：

<style>
    .modal-open .modal {
        overflow: visible
    }

    .modal-dialog {
        position: fixed;
        left: 60%;

    }
</style>

要应用的HTML：

<div class=" bg-white" modaldraggable>
    <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
        <div class="modal-header">
            <div class="modal-title">{{alert_data.title}}</div>
        </div>
        <div class="modal-body" style="height: 319px">
            <iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
        </div>
        <div class="modal-footer">
            <button class="btn btn-info btn-xs" ng-click="cancel()">Ok</button>
        </div>
    </form>
</div>

********* Note **

我试图覆盖一个非常独特的模板的引导类选择器...通过在main.css中执行.modal {}我会覆盖它们...这就是为什么我需要一个自定义选择器来处理它们。 / p>

Answer 1

要将多个类应用于元素，只需像这样写（即不使用逗号）：

<div class="class1 class2 class3">...</div>

要将具有ID的类混合，请写

<div id="element1" class="class3 class4">...</div>

Answer 2

出于一般良好的编码习惯，将css应用于具有类似类的元素总是更好：

.red{
     background-color: red;
}
.outline{
     border: 2px #000 solid;
}

<div class="red outline"></div>

元素中的类用空格分隔，最后一个是最重要的类（如果需要可以覆盖一些css属性）

这样做的主要目的是确保您的代码是可持续的，如果您想为页面添加具有相同属性的新元素，则无需重新编写某些CSS。

关于ID：

在元素上只使用一个ID，它应该只需要一个，并且这个id在整个文档中应该是唯一的，这比使用class给出的css属性更重要。

我还建议this article进一步了解此事。

享受前端！

具有多个ID或类的元素的适当CSS语法

2 个答案: