css选择器总结（CSS选择器中：类和ID选择器的区别）

：暂无数据 2026-09-05 05:20:02 ：2

“css选择器总结”相关信息最新大全有哪些，这是大家都非常关心的，接下来就一起看看css选择器总结（CSS选择器中：类和ID选择器的区别）！

本文目录

CSS选择器中：类和ID选择器的区别
css中兄弟选择器的概念、连接符及用法
浏览器是怎样解析 CSS 选择器的
CSS的ID选择器的唯一性具体范围是什么

CSS选择器中：类和ID选择器的区别

类选择器是用来匹配类似下面这样的HTML元素的：
《div class="xxxx"》......《/div》
而ID选择器是用来匹配类似下面的HTML元素的：
《div id="xxxx"》......《/div》
类（Class）和ID的区别：
ID就好比是身份证，是不能有重复的，一个ID只能代表一个人；
而类则是种类、类别，比如说“广东人”是一类，“男的”是一类，“大学生”也是一类，也就是说，一个类可以代表一群人。
总结就是：ID选择器只能匹配网页上的一个元素，而类选择器可以匹配同一网页上的多个元素。

css中兄弟选择器的概念、连接符及用法

1、CSS兄弟相邻选择器加号

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

CSS兄弟相邻选择器加号，举例说明

HTML代码

《p》这里是第一个P标签《/p》《p》这里是第二个P标签《/p》《h3 class = ’h3’》标题H2《/h3》《p》这里是第一个P标签《/p》《p》这里是第二个P标签《/p》《p》这里是第三个P标签《/p》《p》这里是第四个P标签《/p》

CSS代码

.h3 + p{
color: red;
}

2、CSS兄弟选择器~(匹配选择器)

’~’匹配所有在指定元素之后的同级某个元素

举例说明一个，CSS的匹配选择器

HTML代码

CSS代码

.h3 ~ p{
color: red;
}

3、总结：

CSS中的兄弟选择符号‘~’，可以选择指定元素后的，同级的相同的所有元素。比如上面的示例，所以h3标签后的P标签全部被选择，并加入了样式

通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

其他选择器可参考

浏览器是怎样解析 CSS 选择器的

首先，CSS 的读取顺序是 从右向左

举个例子

它的读取顺序是：

那么，为什么读取顺序是从右向左呢？

举个例子：

假如 DOM 结构如上图，
假设匹配规则是 .mod-nav h3 span

如果从左向右匹配，过程是：

如果从右向左匹配：

总结：这是一个树形结构，很明显，从 child 开始找 parent 比从 parent 找 child 要高效

CSS的ID选择器的唯一性具体范围是什么

一、ID与CLASS的使用原则
据说W3C对于ID与CLASS的设定是ID具有唯一性，CLASS具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。
ID是不能重复的，所以在XHTML的结构中，大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID，配色背景用CLASS，其实这是不正确的，ID与布局排版没有直接关系，CLASS与配色也不是对等的。有人呢为了麻烦全都用ID或是全都用CLASS，全都用CLASS呢还有可理解，全都用ID就不正常了，这有悖ID唯一性。如果每个ID都不一样，那非累死不可。我通过实践总结的使用原则是：ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是孙级。
你可以有两个儿子但你能有两个爸爸吗，就是这个道理。在我们写CSS的时候可以写成这样 #father .child 尽量不要让Class包含ID，.father #child 如果写成这样显得有点可笑。当然这也不是铁定的，特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。
以上就是ID与CLASS使用原则，归总起来一句话：ID是唯一的并是父级的，CLASS是可以重复的并是子级的。
二、ID与CLASS的使用技巧
1、子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
2、CLASS中的子级最好不用ID。当然特殊情况特殊对待。
3、CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。
其实上面讲的都是一些大家都明白的内容，只是我捡了个漏先写下来算是一个总结。希望大家对于ID与CLASS的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。

OK，关于css选择器总结和CSS选择器中：类和ID选择器的区别的内容到此结束了，希望对大家有所帮助。

css选择器总结（CSS选择器中：类和ID选择器的区别）