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

本文详细介绍了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。

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