CSS中对html元素的样式进行控制是通过CSS选择器来完成的，最常用的两种选择器为id选择器和class选择器。

id选择器和class选择器介绍

id选择器：用来为标有特定id的html元素指定特定的样式，html元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。
如下例子：
#para1{
text-align:center;
color:red;
}

<body>
<p id="para1">Hello World！</p>
<p>这个段落不受该样式的影响。</p>
</body>
上例中第一个<p>就会会被指定为para1样式。

class选择器：用于描述一组元素的样式，html元素通过class属性来设置class选择器，可以用于多个html元素，一个元素也可以有多个class选择器。以"."来定义。
.center{
text-align:center;
}

id选择器和class选择器的区别：

id选择器：由于我们为html元素指定id时，通常要保证id是唯一的(便于js中的getElementById的正常使用)，所以id选择器一般在一个页面中只能被单个的html元素引用。并且不能为一个html元素指定多个id选择器，试想一下，一个html元素怎么可能有多个id。

class选择器：class选择器可以被多个html元素使用，因为元素的class属性没有必要保证唯一性。另外一个html元素也可以有多个class属性值，值之间用","号隔开。如<p class="cls1,cls2"></p>是可以的。

CSS中id选择器和class选择器相关推荐

css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
CSS中的nth-child和nth-of-type选择器
CSS中的nth-child和nth-type-of选择器先写一个例子 <head><style>*{margin: 0px;padding: 0px;}.item{vert ...
CSS中id选择器和类选择器的区别
id选择器和类选择器的区别 (1)类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用. (2)id选择器好比人的身份证号码,全中国是唯一的,不得重复. (3)id ...
CSS中常用的几种选择器是哪几种呢？
CSS中常用的选择器: (一)基本选择器(二)层次选择器(三)动态伪类选择器(四)目标伪类选择器 (五)ui状态伪类选择器(六)结构伪类选择器(七)属性选择器(八)伪元素 (一)基本选择器 ...
在CSS中使用not：first-child选择器
Introduction: 介绍: Well, selectors are a very common term to deal with while we are developing a webs ...
【转】在CSS中 ID与Class的区别?谢谢
在样式表定义一个样式的时候,可以定义id也可以定义class.1.在CSS文件里书写时,ID加前缀"#":CLASS用"."2.id一个页面只可以使用一次:cl ...
CSS中id选择器失效，代码看起来没问题
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...

CSS中id选择器和class选择器

id选择器和class选择器介绍

id选择器和class选择器的区别：

CSS中id选择器和class选择器相关推荐

最新文章

热门文章