zoukankan      html  css  js  c++  java
  • CSS基础【01】类和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的作用。

  • 相关阅读:
    接口开发中的 RestTemplate 传参问题
    逆流成河:五年软件开发生涯
    .NET Web开发技术简单整理
    2011-05-29 21:48 VS.NET2010水晶报表安装部署[VS2010]
    WPF 基础到企业应用系列3——WPF开发漫谈
    C# WinForm开发系列
    接口和委托的区别
    通过jquery触发select自身的change事件
    php去掉字符串中的最后一个字符和汉字
    Go语言学习之数据类型
  • 原文地址:https://www.cnblogs.com/lolitagis02/p/8259773.html
Copyright © 2011-2022 走看看