CSS 的 ID 和 Class 有什么区别?如何正确使用它们
3个回答
2017-03-28 · 百度认证:河北灵动电子商务有限公司
灵动电商
河北灵动电子商务有限公司-高端网站建设公司.主要从事网站建设,SEO优化,平面设计,微信营销,微信二次开发,团队成员自2004年开始从事网站建设相关服务,拥有丰富的设计和技术经验,专为中小企业提供网站建设
向TA提问
关注
展开全部
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应该有一定的规范性。
Storm代理
2023-08-29 广告
2023-08-29 广告
"StormProxies是全球大数据IP资源服务商,其住宅代理网络由真实的家庭住宅IP组成,可为企业或个人提供满足各种场景的代理产品。点击免费测试(注册即送1G流量)StormProxies有哪些优势?1、IP+端口提取形式,不限带宽,I...
点击进入详情页
本回答由Storm代理提供
展开全部
1,在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’。
2,id属性一般在一个页面中只可以使用一次,而class可以被多次引用。
3,id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。
例如:
Html中<div id="div1"></div>给该div添加样式,有两种方法:①直接在CSS文件中定义Id选择器#div1{}②在CSS定义类选择器.class1{},然后<div id="div1" class="class1"></div>指明他的类样式 两种方法的效果是一样的,但是id只能给一个元素指明类样式,而class可以在任一元素中定义它的样式。
举个例子:class和id在页面里面的使用方法:
class:
<style type="text/css">
.footer{background:red;}
</style> <div class="footer">footer</div>
id: <style type="text/css">
#footer{background:red;}
</style>
<div id="footer">footer</div>
定义class的css是用点:“.”,如.footer
定义id的css是用井号“#”,如#footer
//让div居中对齐
让div内的内容(包括文字及图片)居中的代码是: text-align:center;
<style type="text/css">
刚刚入门,要记住。
.align-center{
margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
2,id属性一般在一个页面中只可以使用一次,而class可以被多次引用。
3,id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。
例如:
Html中<div id="div1"></div>给该div添加样式,有两种方法:①直接在CSS文件中定义Id选择器#div1{}②在CSS定义类选择器.class1{},然后<div id="div1" class="class1"></div>指明他的类样式 两种方法的效果是一样的,但是id只能给一个元素指明类样式,而class可以在任一元素中定义它的样式。
举个例子:class和id在页面里面的使用方法:
class:
<style type="text/css">
.footer{background:red;}
</style> <div class="footer">footer</div>
id: <style type="text/css">
#footer{background:red;}
</style>
<div id="footer">footer</div>
定义class的css是用点:“.”,如.footer
定义id的css是用井号“#”,如#footer
//让div居中对齐
让div内的内容(包括文字及图片)居中的代码是: text-align:center;
<style type="text/css">
刚刚入门,要记住。
.align-center{
margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2016-08-06 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
个人总结的一些区别:
在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则可以出现多个
在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则可以出现多个
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询