1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css的ID选择器和class选择器的区别

css的ID选择器和class选择器的区别

时间:2020-08-20 05:31:08

相关推荐

css的ID选择器和class选择器的区别

CSS的ID选择器和class选择器

一、ID选择器和Class选择器的区别

1、一个HTML标签只能应用于一个ID选择器

2、一个HTML标签可以应用多个class选择器

3、ID选择器是以“#”开头,并且只能在单个元素使用

4、Class选择器是以“.”开头,可以多个元素应用,中间用“,”隔开

二、

1.ID选择器

代码如下(示例):

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>ID选择器()</title> <style>#para1{text-align:center;color:red;} </style></head><body><p id="para1">Hello World!</p><p>这个段落不受该样式的影响。</p></body></html>

2.class选择器

代码如下(示例):

<!doctype html><html><head><meta charset="utf-8"><title>class选择器</title><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>

3、可以特指某个元素使用class,其他元素不受影响

<!doctype html><html><head><meta charset="utf-8"><title>class选择器</title><style>p.center{text-align:center;}</style></head><body><h1 class="center">这个标题不受影响</h1><p class="center">这个段落居中对齐。</p> </body></html>


总结

日常使用选择器时经量使用class,可以有效减少重复的代码,提高效率。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。