CSS 的 ID 和 Class 有什么区别?如何正确使用它们

html-css012

CSS 的 ID 和 Class 有什么区别?如何正确使用它们,第1张

css的id和class不同之处在于体现在以下几个方面:

css中id的优先级高于class,以下示例代码进行说明:

<style>

.aa{color:#000}

#bb{color:ff0000}

</style>

<div class="aa" id="bb">猜猜class和id优先级谁高</div>

<style>

#bb{color:ff0000}

.aa{color:#000}

</style>

<div class="aa" id="bb">猜猜class和id优先级谁高</div>

说明:无论class的样式文件在第一行或者第二行输出结果都是红色字体,说明id优先级高于class。

2.class css中得用.class的属性值,id是#id的值。

正确使用id和class

如果涉及到js获取值的话用id,否则用class来写。

注意事项:命名css的class和id应该有一定的规范性。

在写样式的时候,class是用点符号(.)标识,id是用符号(#)标识;

class可以在页面里面重复使用,

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

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