CSS选择器中类和ID选择器的区别
2015-07-20 19:49
615 查看
类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
下面代码是正确的:
<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
而下面代码是错误的:
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
下面的代码是正确的(完整代码见右侧代码编辑器)
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是不正确的(完整代码见右侧代码编辑器)
#stressid{ color:red; } #bigsizeid{ font-size:25px; } <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
相关文章推荐
- CSS 伪元素 伪类
- 漂亮的登录界面
- CSS - 内联元素span 强制换行失败的可能原因
- css+html 制作三角形
- 总结CSS3新特性(Transform篇)
- 总结CSS3新特性(Transform篇)
- CSS + DIV 使用方法总结
- css
- CSS3 学习总结
- 为什么排版引擎解析 CSS 选择器时一定要从右往左解析?
- 初识CSS3
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第十四讲:DIV+CSS实例
- DatePicker的一些样式属性设置
- 纯CSS3美化radio和checkbox
- 史上最全的CSS hack方式一览
- 左侧显示信息选项卡的样式控制
- JS+CSS实现幻灯片
- 【HTML+CSS】浅谈:相对定位与绝对定位
- 浏览器加载和渲染html的顺序-css渲染效率的探究
- 终于搞懂了CSS实现三角形图标的原理