CSS中id选择器和类选择器的区别

id选择器和类选择器的区别

（1）类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

（2）id选择器好比人的身份证号码，全中国是唯一的，不得重复。

（3）id选择器和类选择器最大的不同在于使用次数上。

（4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

类选择器的使用

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>类选择器</title><style>/* 类选择器口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用 *//*注意：1.类选择器使用"."(英文点号)进行标识，后面要紧跟类名(自定义，我们自己命名的)。2.可以理解为给这个标签起了一个名字，来表示。3.长名称或词组可以使用中横线来为这个选择器命名。4.不要使用纯数字、中文等命名，尽量使用英文字母来表示。 */.red {color: red;}.star-sing {color: purple;}</style>
</head>
<body><ul><li class="red">薛之谦</li><li class="red">邓紫棋</li><li class="star-sing">周杰伦</li><li>汪苏泷</li><li>毛不易</li></ul><div class="red">我也想变红色</div>
</body>
</html>

id选择器的使用

<!DOCTYPE html>
<html">
<head><meta charset="UTF-8"><title>基础选择器之id选择器</title><style>/* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别的标签切勿使用 */#pink {color: pink;}</style>
</head>
<body><div id="pink">薛之谦</div>
</body>
</html>

CSS中id选择器和类选择器的区别相关推荐

css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
CSS中常用的伪类选择器
一 .伪类(不存在的类,特殊的类) -伪类用来描述一个元素的特殊状态比如:第一个元素,被点击的元素,鼠标移入的元素··· -特点:一般请情况下,使用:开头 1. :first-child 第一个子元 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
CSS - id选择器和类选择器
文章目录类选择器一 .类选择器 1. 语法二 .类选择器 - 多类名 1. 多类名使用方式三.案例 ID选择器一.id选择器的使用 1. 语法 2. 注意二.id选择器和类选择器的区别类 ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
6—CSS基础选择器（标签选择器、类选择器、id选择器）
css简介 css是层叠样式表的简称,css主要用于设置html的文本内容.图像的外形以及版式的布局和外观显示样式.css让我们的网页更加丰富多彩,布局更加灵活自如. css语法规范 css规则由两个 ...
html类选择器和id选择器,HTML+CSS：css选择器介绍之标签选择器、类选择器以及ID选择器...
原标题:HTML+CSS:css选择器介绍之标签选择器.类选择器以及ID选择器上篇文章给大家说了css的三种不同的引入方式,今天给大家说一下css的三种选择器:标签选择器.类选择器和ID选择器. 那 ...

CSS中id选择器和类选择器的区别

id选择器和类选择器的区别

类选择器的使用

id选择器的使用

CSS中id选择器和类选择器的区别相关推荐

最新文章

热门文章