美文网首页
类和ID选择器的区别

类和ID选择器的区别

作者: followyounger1 | 来源:发表于2017-07-06 08:37 被阅读16次

学习了类选择器和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学习: 1 . 类选择器和id选择器的区别和使用,id选择器只能够用一次,类选择器可以用多次,使用方法是...

  • CSS 选择器

    CSS选择器的概念 标签选择器 类选择器 ID选择器 类选择器与ID选择器的区别 子代选择器 后代选择器 子选择器...

  • CSS

    CSS 选择器 类选择器 .class ID选择器 #idName 相同点可以应用于任何元素 区别 ID选择器为唯...

  • HTML+CSS基础

    CSS选择器 1、类和ID选择器的区别 相同点:可以应用于任何元素 不同点: 1、ID选择器只能在文档中使用一次。...

  • react 开发实战

    CSS:选择器用法:.类名 //类选择器 id名 //id 选择器 .类名 元素名 //后代选择器,包含子元素和子...

  • 类选择器和id选择器的区别

    上面两张图片分别是id选择器和类选择器,二者相似度极高,id选择器的#像是类选择器当中的.,而id选择器当中的id...

  • css选择器

    目录 1、元素选择器2、选择器分组3、类选择器结合元素选择器使用:多类选择器4、ID选择器ID选择器和类选择器的区...

  • CSS 选择器种类、权重和优先级

    主要内容: 常见的CSS选择器、选择器的优先级。 class 和 id 选择器 class 和 id 选择器的区别...

  • CSS选择器

    一、class和id使用的场景 class:类选择器,匹配class包含的特定类的元素。id:id选择器,匹配id...

  • 类和ID选择器的区别

    1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类...

网友评论

      本文标题:类和ID选择器的区别

      本文链接:https://www.haomeiwen.com/subject/ednchxtx.html