css的id和class不同之处在于体现在以下几个方面:
css中id的优先级高于class,以下示例代码进行说明:
猜猜class和id优先级谁高猜猜class和id优先级谁高
说明:无论class的样式文件在第一行或者第二行输出结果都是红色字体,说明id优先级高于class。
2.class css中得用.class的属性值,id是#id的值。
正确使用id和class
如果涉及到js获取值的话用id,否则用class来写。
注意事项:命名css的class和id应该有一定的规范性。
ID 和 Class的区别和使用:
1.ID是页面中唯一的,而class可以多个,(如下图),1位置引号中只有2个,css5和css5_class,而2位置引号中就只能有一个 css5_id
2.ID要设置样式时用“#”号定义,而class用“.” 号定义。
3.ID的优先级大于class
比如说在同一个标签中,id样式中定义了文字颜色为红色,class文字颜色为绿色。结果显示是id的红色。(如下图)
ID具有唯一性,Class具有普遍性。
ID是唯一的,所以尽量在结构外围使用,通常用于页面布局。
Class是可重复的,所以尽量在结构内部使用,通常用于样式定义。
ID的样式优先级高于Class。
class类标记,可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)
id:在同一个页面,只可以被调用一次,在CSS里用“#”表示。
class:是类标签,在同一个页面可以调用无数次(没限制的),在CSS里用“.”表示。
ID就像一个人的身份证,用于识别这个DIV的,Class就像人身上穿的衣服,用于定义这个DIV的样式。一般一个网页不设二个或二个以上同ID的div,但Class可以多个DIV用同一个Class
在样式表定义一个样式的时候,可以定义id也可以定义class。
一、CSS 类选择器 class
1.类选择器允许以一种独立于文档元素的方式来指定样式。
2.该选择器可以单独使用,也可以与其他元素结合使用。
提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
3. 语法使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:
*.important {color:red;}
如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响:
.important {color:red;}
结合元素选择器
4.类选择器可以结合元素选择器来使用。
例如,您可能希望只有段落显示为红色文本:
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。
如果你确实希望为 h1 元素指定不同的样式,可以使用选择器 h1.important:
p.important {color:red;}
h1.important {color:blue;}
5.重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。
二、CSS ID 选择器:
1.ID 选择器允许以一种独立于文档元素的方式来指定样式。
2.在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。
3.语法
首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则:
*#intro {font-weight:bold;}
与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子:
This is a paragraph of introduction.
This is a paragraph of introduction.
个人总结的一些区别:
在css中,ID的前缀用"#",Class的前缀用"."
同一个标签,只能有一个ID,但可以有多个Class(如:div id="div1" class="div1 div2 div3",表示该div的ID为div1,Class分别为div1、div2、div3三个)
优先级:同时定义一个标签的ID和Class的css,ID所定义的css优先于Class(如:#div{font-size:14px;} .div{font-size:12px;};则它的字体大小是14px)
在同一个页面,ID只能出现一个,Class则可以出现多个
希望对你有所帮助。