ID 类 CSS 文件答案

【问题标题】：ID class CSS filesID 类 CSS 文件
【发布时间】：2025-12-09 11:40:01
【问题描述】：

我在 css 方面遇到了一些困难，需要一些关于类和 ID 的建议；s 我调用了两个 CSS 文件，一个用于 STYLING，一个用于 DIV DIMENSIONS

假设我有以下 HTML 标头：

HTML

<div id="header" class="section">

在尺寸文件中找到 CSS

.section { 
    padding: 0px;
    margin: 0;
    width: 100%;
    clear: both;
}

在 STYLING 文件中找到 CSS

#header {   
    min-width: 50em;
    height: auto;
    overflow: hidden;
    background: #000; 
}

以下假设是否正确？

1) 我假设类和 ID 样式的组合将应用于标题。但是，ID 选择器中的样式会因为特异性而优先？因此，如果我在 ID css 中定义宽度，这将胜过“类”css。

2) 我假设您可以在 css 中使用这两个类的组合？

非常感谢，皮特

【问题讨论】：

问题是什么？另外，看看Specificity Calculator
@pete Vucko 几乎回答了你的问题。是的，您可以组合您的选择器，但无需将 ID 和 CLASS 都组合起来，因为 ID 必须是每页唯一的。
你可以组合，jsfiddle.net/9c1kp552，但你想保持干净，使用 Id 用于实际目的，例如从 javascript 中引用对象
同时使用 ids 和 class 是有意义的。 OP 可以有多个部分，但只有一个标题部分。

标签： html css class css-selectors

【解决方案1】：

您不应将样式和尺寸拆分到不同的 CSS 文件中，这样会更难概览您的代码和样式。

您应该为可以在页面上多次出现的颜色、外观和内容生成类，例如，您可以为任意数量的元素分配 class="green"，即使是动态内容也无需粘贴手动样式标记.

注意：一个非常好的 html 页面设计不包含任何单一的原始“样式”标签，并且通过 css 完成所有操作。

在您的网站上只出现一次的所有其他内容，例如标题、导航等 - 布局中的元素都可以获得分配的 ID，是的。

但您不应该将它们拆分为 2 个 CSS 文件，因为它不是必需的，除非您的项目非常庞大和复杂。

例如：

<style type="text/css">
    #content {
        width: 300px;
    }
    .error {
        color: red;
    }
    .success {
        color: green;
    }
</style>

<div id="content"> <!-- Appears only once on your website -->
    <div class="error">Some error</div> <!-- Can appear multiple times -->
    <div class="error">Another error</div>  <!-- Can appear multiple times -->
    <div class="success">Some success message</div> <!-- Can appear multiple times -->
</div>

所以回答你的问题：

一般来说，将两者混合使用既不是必要的，也不是一个好的做法，因为您将覆盖属性，之后会想知道为什么您的页面看起来损坏、丑陋或类似的东西！

【讨论】：

【解决方案2】：

由于特殊性，ID 选择器将优先 - 是
您可以在 css 中使用这两个类的组合 - 是的

一个简单的小提琴可以更好地解释你

http://jsfiddle.net/s8czntkn/

.section { 
    padding: 0px;
    margin: 0;
    width: 100%;
    clear: both;
}
#header {   
    min-width: 10px;
    height: auto;
    overflow: hidden;
    width:100px;
    background: lightgrey; 
}

【讨论】：