CSS中#和.的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中#和.的区别相关的知识,希望对你有一定的参考价值。

id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top的形式来定义;

class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义。

定义html中的标签,如ul,img,p等时,直接写:img{}

class是样式组,用.style定义,class="style": 
.style定义样式组,可以被反复调用,就是说你一个页面里,可以有多个元素用同一个style; 

ID是固定标签,用#style1定义,ID="style1"

#main和.main有什么区别:

#main 定义的是ID为"main"这个元素的样式
.main 的意思是新建一个名为"main"的样式
#main 只能定义ID为"main"这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class="main"

用#定义CSS样式,在调用时必须用ID,用.定义CSS样式,在调用时必须用CLASS。用#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一次;而.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一个层里同时出现ID和CLASS样式,ID更优先于CLASS。

简单来说: #main是定义具体对象main的专有属性;.main是定义抽象对象的共有属性main。比较广泛的用途是#用于定义网页框架;.用于定义各个网页元素。#main中的main只能在网页中出现一次,而.main中的main可以出现无数次。

 

使用范例

    class:

        .footer{background:red;}

     footer

    id:

        #footer{background:red;}

     footer

     定义class的css是用点:“.”,如.footer

     定义id的css是用井号“#”,如#footer

以上是关于CSS中#和.的区别的主要内容,如果未能解决你的问题,请参考以下文章

代码片段如何使用CSS来快速定义多彩光标

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器