css的class和id

<!DOCTYPE html>
<html><style>body{margin: 0;padding: 10px;}.a_1{display: block;width: 100px;height: 50px;overflow: hidden;padding: 10px;border: dashed;margin: 10px;background-image: url(img/1.jpg);}#a_1img{width: 100%;height: 100%;}.BgImg{background-size:contain;}#BgImg{background-size:contain;}#a_1{display: block;width: 100px;height: 50px;overflow: hidden;padding: 10px;border: dashed;margin: 10px;background-image: url(img/1.jpg);}</style><head><meta charset="{CHARSET}"><title></title></head><body><div  class="a_1 BgImg "<!--id="a_1 BgImg"--> ><!--<img id="a_1img" src="img/1.jpg"/>--></div></body>
</html>

用这个属性的时候，我们看到，一切正常。但是我们用id来试试

<!DOCTYPE html>
<html><style>body{margin: 0;padding: 10px;}.a_1{display: block;width: 100px;height: 50px;overflow: hidden;padding: 10px;border: dashed;margin: 10px;background-image: url(img/1.jpg);}#a_1img{width: 100%;height: 100%;}.BgImg{background-size:contain;}#BgImg{background-size:contain;}#a_1{display: block;width: 100px;height: 50px;overflow: hidden;padding: 10px;border: dashed;margin: 10px;background-image: url(img/1.jpg);}</style><head><meta charset="{CHARSET}"><title></title></head><body><div  id="a_1 BgImg"<!--class="a_1 BgImg "--> ><!--<img id="a_1img" src="img/1.jpg"/>--></div></body>
</html>

用id包括两个，直接这样！

说明什么？说明id全场每个元素有且仅有一个，style里面的#的也一样，全场只能给一个人。双向唯一！！！否则报错，就像你的身份证一样，不可能两个人身份证号码是一样的，对吧

1、语法区别：
id对应css是用样式选择符“#”（井号）。
class对应css是用样式选择符“.”(英文半角输入句号)。
2、使用次数区别：
id属性，只能被一个元素调用（以“#”选择符命名CSS样式在一个页面只能使用调用一次）。在同一个页面，只可以被调用一次，在CSS里用“#”表示。
class类标记，可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)是类标签，在同一个页面可以调用无数次（没限制的），在CSS里用“.”表示。
ID就像一个人的身份证，用于识别这个DIV的，Class就像人身上穿的衣服，用于定义这个DIV的样式。一般一个网页不设二个或二个以上同ID的div，但Class可以多个DIV用同一个Class。
3、语义和使用不同：
id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反先定义一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。

css的class和id相关推荐

[css] css中class和id选择器有什么区别？
[css] css中class和id选择器有什么区别? id 在部分浏览器的 js 中会直接生成同名变量: id 的唯一性,获取该 id 的 dom 时,会取同名 id 的前者: id 层叠权重非常高 ...
CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...
css基本选择器，id选择器，class选择器，标签选择器，*通配符选择器，逗号空格 + ＞
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css基本选择器包括id选择器,class选择器,标签选择器,*通配符选择器,以及使用逗号实现查询集合,空格实现查询后代,>实 ...
css类选择器与id选择器_一点点的类：有效地使用CSS类选择器
css类选择器与id选择器 Classes are one of the most powerful CSS selectors, but they tend to be somewhat misun ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍
陈力:传智播客古代珍宝币泡泡龙游戏开发第八讲:DIV+CSS中类选择器.id选择器和html选择器介绍陈力:传智播客古代珍宝币泡泡龙游戏开发第七讲:DIV+CSS入门.在贵阳网站建设中,经常 ...
HTML，CSS的class与id命名规则
个人博客点这里最重要的部分先说(命名书写格式) 常见的格式有:连接符(search-btn).下划线.全小(searchbox).小驼峰(searchBox). 现在用得多广泛的还是第一种使用连接符 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
css案例学习之id要唯一
ID有两个的后果 <html> <head> <title>ID选择器</title> <style type="text/css&qu ...
css学习06：id选择器
id选择器可以为标有特定id的HTML元素指定特有的样式 HTML元素以id属性来设置id选择器,css中id选择器以"#"来定义语法: #id名 { 属性1:属 ...

css的class和id

css的class和id

css的class和id相关推荐

最新文章

热门文章