CSS 类挑选符和ID挑选符的差别

2021-03-17 21:26 jianzhan

本文详细介绍了CSS 类挑选符和ID挑选符的差别,共享给大伙儿,实际以下:

类挑选符

HTML编码:

<div class="one"></div>
<div></div>

CSS编码:

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

.one {
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}

假如想让网页页面中一些元素的外型与别的同类标识区别开,可使用类挑选符。

最先给挑选符起1个姓名,随后把这个姓名特定给想装饰设计的HTML标识。比如上1个事例中,我就给第1个div取名为“one”。

类挑选符还能精准操纵某个元素的外型,而无论元素应用的是哪一个标识。例如要想装饰设计1段话里的1两个词,儿不想危害全部<p>标识的外型。这时候便可以用类挑选符选择要装饰设计的词。

必须留意的是,应用类挑选符选择某个标识里的一部分单词时,必须依靠<span>标识。

类挑选符的用法:

  1. 在CSS中,类挑选符的名字务必以点号开始。这样Web访问器才可以在款式表格中寻找类挑选符。
  2. 类挑选符的名字中只能包括字母、数据、连标识符和下划线。
  3. 挑选符的名字务必以字母开始。
  4. 类挑选符区别尺寸写。
  5. 在HTML中,标识设定class特性。 <p class="类名"> 。

在HTML中,class特性的值前面无需加点号。仅有在款式表格中类挑选符的名字前面必须点号。

1个标识应用好几个类

除能够把同1个类运用到不一样的标识上以外,1个标识还能够另外应用好几个类。

撰写好几个类款式,在1个标识中设定好几个类,听起来要做许多工作中,可在具体开发设计中却常常这么做。较为火的bootstrap架构就这么做的。

比如大家有好几个div,每一个div的尺寸、边框都1样,别的特性不尽相同。

HTML编码:

<div class="div one"></div>
<div class="div two"></div>
<div class="div three"></div>

CSS编码:

/* 种类挑选器 */
div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

/* 下列3个全是类挑选器 */
.one {
    background: linear-gradient(#1574A8, #15A892);
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two {
    background: radial-gradient(#E94E65, #15A892);
}
.three {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

Web访问器和HTML都容许为同1个标识设定好几个类。在HTML中,类根据class特性特定,其值中的每一个类名由空格分开。

访问器会把各个类的特性合拼在1起,随后再运用到元素上。

ID挑选符

CSS应用ID挑选符选择网页页面中的特殊一部分,比如横幅、导航栏栏或主內容地区。

在HTML中设定ID的方式与设定类的方式类似,但是应用的特性不一样。

HTML编码:

<div id="d1"></div>
<div></div>

CSS编码:

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}
#d1 {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

在HTML中,元素设定id特性。

在CSS中,用 # 井号开始,后边跟随id名。

正确地应用ID

HTML的id特性一些功效是class特性完成不上的。这些优点与CSS没事儿,因而彻底能够不可用ID挑选符。

ID的优点:

  1. 为网页页面关键元素设置ID后,JavaScript程序流程员能够根据ID随便精准定位并解决网页页面中的某一部分內容。比如,程序流程员常常会为表单的元素设置ID,比如填写访客姓名的文字框。JavaScript根据ID精准定位这个表模块素后能够做许多解决,比如,保证访客递交表单时哪一个字段并不是空的。
  2. 应用ID还能连接到网页页面中的特殊一部分,对內容多的网页页面来讲,这样便于迅速导航栏。假如有个按字母表次序排序的术语表,可使用ID挑选符连接到以各个字母开始的一部分。

Web设计方案圈有个发展趋势,尽可能不在CSS中应用ID挑选符。

我的了解是由于ID挑选符的特指度较为高,后续假如要遮盖款式会增大难度。并且ID的应用水平没类的应用水平广。

ID特性就非常于大家人的身份证,具备唯1的标识性。

类特性就有点相近人的使用价值观,有着同1种使用价值观的人能够有许多,1本人还可以另外有着几种使用价值观。

ID挑选器和类挑选器的不一样点

  1. 1个元素能够有好几个类,1个类还可以加上到好几个元素中。
  2. 1个ID在同1个网页页面中只能出現1次,1个元素只能有1个ID。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。