CSS类选择器和ID选择器

2018-06-24 01:09:42来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的

ID也可以用来标识持久的结构性元素,例如主导航或内容区域

ID还可以用来标识一次性元素,例如某个链接或表单元素

一个ID只能应用于页面上的一个元素。

同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。例如有一个新闻页面,其中包含多篇新闻,代码如下所示

    <div id="story-id-1">
        <h2>ID</h2>
        <p>ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。 ID也可以用来标识持久的结构性元素,例如主导航或内容区域。 ID还可以用来标识一次性元素,例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
        </p>
    </div>
    <div id="story-id-2">
        <h2></h2>
        <p>同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
        </p>
    </div>

不必给每篇新闻分配不同的ID,可以给所有新闻分配一个类名news.

    <div class="news">
        <h2>ID</h2>
        <p>ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。 ID也可以用来标识持久的结构性元素,例如主导航或内容区域。 ID还可以用来标识一次性元素,例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
        </p>
    </div>
    <div class="news">
        <h2></h2>
        <p>同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
        </p>
    </div>

在分配ID和类名时,一定要尽可能保持名称与表现方式无关。例如,如果希望所有表单通知消息显示为红色,可以给他们分配类名red。只要页面上没有其他红色的元素,这就没问题。但是,如果还希望让4个必需的表单标签也显示为红色,就必须猜测这个类引用的是哪种元素,这时情况就有些混乱了。想象一下,如果在整个网站上到处使用表现性元素,代码会多么混乱。如果决定把表单通知由红色改为黄色,就更复杂了。在这种情况下,必须修改所有类名,否则名为red的元素就会显示为黄色。

因此,应该根据“它们是什么”来为元素命名,而不应该根据“它们的外观如何”来命名,这种方式会让代码更有意义,并且避免代码与设计不同步。对于前面的示例,不要给通知分配类名red,而是应该分配更有意义的名称,比如,.warning或.notification。有意义的类名的最大优点是可以在整个网站中重用它们。例如,还可以在其他类型的消息上使用.notification类,可以根据它们在文档中的位置应用完全不同的样式。

差的名称 好的名称

red

error
leftColumn secondaryContent
topNav mainNav
firstPara intro

CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写,为了容易辨认,最好统一采用完全小写的类名和ID,多个单词之间用连字符分隔,例如,andy-budd比andyBudd清楚的多。

 

ID还是类?

相信你曾和我一样,常常很难决定一个元素应该使用ID还是类名。一般原则是,类应该应用于概念上相似的元素,这些元素可以出现在页面上的多个位置而ID应该应用于不同的唯一的元素

只有在目标元素非常独特,绝不会在网站上其他地方别的东西使用这个名称时,建议使用ID。换句话说,只有在绝对确定这个元素只会出现一次的情况下,才应该使用ID,如果你认为以后可能需要相似的元素,就是用类。

 

最后总结区别如下:

第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class

第二:当页面中用到js或者要动态调用对象的时候,要用到id(当然class也会用到,但是id更常用)。

第三:id选择器不能结合使用,class可单独使用,也可与其他元素结合使用。

第四:class有多类选择器,id选择器则无,如

<p class="important warning">
This paragraph is a very important warning.
</p>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS3选择器~一看吓一跳,这么多不会

下一篇:JS基础