CSS 的 ID 和 Class 有啥区别？如何正确使用它们

Posted 2023-05-06

参考技术A class可以在页面里面重复使用，
id由于在页面里面只能出现一次，所以不能重复使用，
所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。

这种情况尽量用id：页面大的模块里面，用id来区分不同的模块。
比如页面里面有这样的模块：最新新闻，推荐新闻等。就可以考虑用id来区分。

还有一点，由于id是页面中唯一的，更多的是定义来留给给页面里面的javascript用。

补充：class和id在页面里面的使用方法：
class：
<style type="text/css">
.footerbackground:red;
</style> <div class="footer">footer</div>
id： <style type="text/css">
#footerbackground:red;
</style>
<div id="footer">footer</div>

定义class的css是用点：“.”，如.footer
定义id的css是用井号“#”，如#footer

//让div居中对齐

让div内的内容（包括文字及图片）居中的代码是： text-align:center;

<style type="text/css">
刚刚入门，要记住。

.align-center
margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */

</style> 参考技术B ID应该保证唯一性，
class可以多处使用，以保证一个样式可以被多个元素应用到
ID的权重要比class要高，css里面应该经历避免使用ID来进行样式定义

ng-class 和 ng-style 有啥区别？

【中文标题】ng-class 和 ng-style 有啥区别？

【英文标题】：What is the difference between ng-class and ng-style?ng-class 和 ng-style 有什么区别？

【发布时间】：2015-01-11 06:03:39

【问题描述】：

ng-class 和ng-style 似乎都是动态设置 CSS 类的方法。它们有什么区别？

【问题讨论】：

ng-class 设置类。 ng-style 设置样式。 This answer 可能会提供信息。

【参考方案1】：

ng-style 用于将 javascript 对象插入 style 属性，而不是 css 类。

以下指令将被翻译成style="color:red"

ng-style="color: 'red'"

ng-class 指令将您的对象转换为 class 属性。

当 isDeleted 变量为 true 时，以下将被转换为 class="deleted"。

ng-class="'deleted': isDeleted"

注意：

ng-style 还有一个用例。如果你想在 style 属性中插入一些东西，你应该考虑使用 ng-style。否则，正如documentation 所建议的那样，在 Internet Explorer 11 之前这将不起作用。

所以，不要使用样式：

style="width: progress"

使用 ng 样式：

ng-style="'width':progress"

【参考方案2】：

在ng-class 中，您正在加载在某个地方定义的 CSS 类，例如 Bootstrap。在ng-style 中，您正在设置您希望该元素具有的 CSS 样式，例如：

ng-style=" 'background-color': person.email == selectedPerson.email ? 'lightgray' : ' '" //background-color is a style

has-error 是在某处定义的由样式组成的类：

ng-class=" 'has-error’: !theForm.email.$valid, 'has-success':theForm.email.$valid

【参考方案3】：

来自官方文档：https://angular.io/api/common/NgClass

这些是使用 ngClass 的不同方式

...

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="'first': true, 'second': true, 'third': false">...</some- 

元素>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="'class1 class2 class3' : true">...</some-element>

2。与 ngStyle 类似，您可以执行以下操作：

**< some-element [ngStyle]="'font-style': styleExp">...</some-element>**

您的 styleExp 可以是任何评估为您正在设置的属性的合法值的东西，例如上例中的字体大小

或者，

****...****

其中 objExp 是一个包含样式属性的键值对的对象 例如宽度：40，边距：'2em'等

【参考方案4】：

理论上它们都是不同的，但实际上在某些时候它们会变得相同

ngStyle 用于在运行时动态添加样式和

ngClass 用于在运行时动态添加一些类，但类也包含一些 css 内容，因此间接您也在此处动态添加 css