前面的学习我们仅仅使用HTML选择器（在HTML页面里为html标签，如 P）
现在我们学习使用clss和id定义属于自己的选择器。
这样，同样的html元素可以通过class或ID使用不同的表现。
在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。
例子：
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
html页面通过id和class属性调用CSS，像下面这样：
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。
同样，你可以在html选择器后面使用一个选择器来指定特殊HTML元素，比如p.jam{值}将作用到带有'jam'class属性的段落。
CSS selector： class 与 ID 的区别
CSS selector：class 和 id 都可以使“单一选择符”有不同的样式
A1：二者主要的区别在哪里呢？
id你只能用来定义单一元素，定义二个以后。页面不会出现什么问题，但是W3检测的时候认为你页面不符合标准；class是类，同一个class可以定义多个元素。就页面效果而言，两个东西的视觉效果几乎无差别。
A2：id 选择符为什么要少用，它有有什么局限性？
单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！
A3：我该在什么时候使用ID，什么时候使用class？
单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。
相关文章：同一元素应用多个class的优先级的测试！
结构中id与class的使用原则与技巧
在前几日的文章中我提到过XHTML的重要性，在那篇文章中我讲了为什么说XHTML结构重要，重视XHTML结构的好处。但是那篇文章从开发的效率入手，并没有深入细节，而今天的这篇文章是讲XHTML中的细节部分的，可以说是上一篇的续述。这篇续述的主题就是ID与CLASS怎么用，在标题中有提及使用原则与技巧，这里的使用原则与技巧是我的经验总结，并非摘自哪本典籍，所以并不是什么权威论述，请各位网友在看到这篇文章时需要有主见的阅读，不要被我的妖言所迷惑。
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的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。
id与class区别 - 该用id还是用class呢
id与class区别，我在前面的文章中已经讲过了。但还是有新手对此非常迷茫，不知道什么时候该用id，什么时候该用class。这两个选择器让新手左右为难。
一、在web标准中是不容许重复ID的，例如 div id="a" 不容许重复2次；而class所定义的是类，理论上可以无限重复。以根据需要多次引用。
二、属性的优先级问题：ID 的优先级要高于class，我们在下面的代码中有示例说明。
三、方便JS等客户端脚本的引用，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单与快捷。
id与class优先级的试验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">
<!--
#YourHomePage {
color:red
}
.YourHomePage {
color:blue
}
-->
</style>
</head>
<body>
<div id="YourHomePage" class="YourHomePage">
52css.com - Div+CSS XHTML XML 教程大全 <br />
52css.com - Div+CSS XHTML XML 教程大全
</div>
</body>
</html>
解析：根据一般的CSS优先级的原则。接近的应该是优先的。class="YourHomePage"更接近于定义样式的元素。但此例中，对元素应用的样式是id所定义的样式。说明id的优先级要高于class！
同一元素应用多个class的优先级的测试http://www.52css.com/article.asp?id=40
分享到：
相关推荐
CSS 选择器是用于选取 HTML 或 XML 文档中元素的语法，它们在网页爬虫、页面解析以及动态网页内容的提取中扮演着重要角色。下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**： - `*`: ...
首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中所有元素，常用于统一设置页面元素的外边距和内边距。但是，由于其作用域较大，使用时应...
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器，例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用...
下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
首先，从语法上看，`id`和`class`的选择器在CSS文件中以不同的符号表示。`id`选择器使用井号`#`作为前缀，如`#exampleId`，而`class`选择器则使用点`.`作为前缀，如`.exampleClass`。 其次，`id`和`class`在页面中...
ID选择器（如`#id3`）的优先级高于类选择器（如`.class3`），而类选择器又高于标签选择器（如`span`）。这是因为它们在CSS中的权重不同，ID选择器权重为100，类选择器为10，标签选择器为1。在这个原则下，如果有冲突...
选择器分为五种基本类型：标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符（*） 星状选择符（*）是CSS选择器中最简单的一种，作用于所有元素。例如：`* { margin: 0; padding: 0; }`...
1. 类选择器和ID选择器： - 类选择器（.class）：用于选取具有特定class属性的元素。例如，使用“.intro”可以选择class为“intro”的所有元素。 - ID选择器（#id）：用于选取具有特定id属性的元素。例如，使用“#...
CSS选择器分为多个级别，从基础的ID选择器(#id)、类选择器(.class)、元素选择器(element)到更复杂的后代选择器(element element)、子代选择器(element > element)、属性选择器[element[attr]]、伪类选择器(:hover, :...
2. **ID选择器**：ID选择器使用`#`前缀，允许你为HTML文档中的唯一元素指定样式。ID是唯一的，因此每个页面中只能使用一次。例如，以下代码将给ID为"mytitle"的元素添加绿色虚线边框： ```css #mytitle { border:...
ID选择器的样式不会与其他元素冲突，因为ID在文档中应是唯一的。例如，设置ID为`header`的元素文本颜色为红色： ```css #header { color: #f00; } ``` 5. **属性选择器**： - 简单属性选择器：选择具有特定...
ID选择器使用`#`前缀加上ID名称表示，用于选择具有特定ID的单个元素。ID在每个文档中应该是唯一的。例如： ```css #a1 { font-weight: bold; } ``` 如果HTML中有`<div id="a1">...</div>`，则该`div`标签内的文字将...
本文将深入探讨CSS选择器的几个主要类型，包括HTML标签选择器、类别(Class)选择器、专用ID选择器、选择器组合筛选、选择器集体声明、选择器的嵌套、子选择器以及属性选择器。 1. **HTML标签选择器**：这是一种最...
- **ID选择器**：`#id` 示例：`#firstname` 描述：选择所有id属性为"firstname"的元素。 - **通用选择器**：`*` 示例：`*` 描述：选择页面上的所有元素。 - **类型选择器**：`element` 示例：`p` 描述：...
1. **ID选择器**（#id）：每个ID选择器赋予100个单位。 2. **类选择器、属性选择器和伪类**（.class, [attr], :pseudo-class）：每个这类选择器赋予10个单位。 3. **标签选择器和伪元素**（element, :pseudo-element...
CSS选择器可以分为多种类型，包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器：通过元素的id属性来选择特定元素，使用#符号加上id名作为选择器（如#idname）。 ...
常用选择器是 CSS 选择器中最基本的选择器，包括三种类型：ID 选择器、类选择器和标签选择器。 * ID 选择器：根据元素的 ID 来选择元素，例如 `#demoDiv{color:#FF0000;}`。在 HTML 中，元素可以定义一个 ID 属性，...
3. ID选择器（ID selector）：通过ID来选择，如`#firstname`选择所有id属性为"firstname"的元素。 4. 通用选择器（Universal selector）：用`*`表示，选择所有元素。 5. 层次选择器：包括子元素选择器（`>`）、相邻...