Question

我对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样式的COMBINATION将应用于标题。但是，由于特异性，ID选择器中的样式将优先？因此，如果我在ID css中定义一个宽度，这将胜过'class'css。

2）我假设你可以在css中使用这两个类的组合吗？

非常感谢，皮特

Answer 1

您不应该在不同的CSS文件中拆分样式和尺寸，这样会更难以概述您的代码和样式。

您应该为您的页面上多次出现的颜色，外观和内容生成类，这样您就可以分配class =＆＃34; green＆＃34;对于尽可能多的元素，即使对于动态内容而不粘贴手动样式标记。

注意：一个非常好的html页面设计不包含任何单一的原始＆＃34;样式＆＃34;标记并通过CSS执行所有操作。

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

但你不应该将它们分成两个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>

所以回答你的问题：

一般来说，混合两者都不是必要的，也不是一个好习惯，因为你会覆盖属性，后来想知道为什么你的页面看起来破碎，丑陋或类似的东西！

Answer 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; 
}

ID类CSS文件

2 个答案: