美文网首页
类和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的作用。

    相关文章

      网友评论

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

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