CSS【ID选择器】与【类选择器】的区别? | ||
名称 | 【ID选择器】 | 【类选择器】 |
英文 | ID | CLASS |
样式 | # | . |
指向 | # -> id | . -> class |
核心区别: | id只被引用一次 | class可以被引用多次 |
次要区别: | id作为元素的标签,用于区分不同结构和内容 | class作为一个样式,它可以被应用到任何结构和内容上 |
id是先确定页面的结构和内容,然后再为它定义样式 | class先定义好一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面 | |
在实际应用时,id更多地被用来实现宏伟布局和设计包含块,或包含框的样式 | 在实际应用时,class更多的被应用到文字版块以及页面修饰等方面 | |
PS: | 目前浏览器都能允许在同一个页面内出现多个相同属性值的id,一般情况下也能正常显示,不过当使用javascript通过id来控制元素时就会出现错误。 |
<style>
.con {
color: #39f;
}
#con {
background-color: #f00;
}
</style>
<div class="con">HTML5中文网</div>
<div id="con">HTML5中文网</div>
效果图:
引用:
css中“#”和“.”的区别是什么?(https://m.html.cn/qa/css3/12387.html)
CSS ID选择器与类选择器的区别(https://blog.csdn.net/theusProme/article/details/60955432)
CSS ID 选择器详解(https://www.w3school.com.cn/css/css_selector_id.asp)