一、元素的id和class
id 和 class是元素最基本的两个属性，一般情况下，id 和 class都是用来选择元素，进而进行CSS操作或JavaScript操作。
1.id属性
id属性具有唯一性，也就是说一个页面中相同的id只能出现一次。若出现多个相同
id，那么CSS或JavaScript会无法识别，这个id对应的是哪个元素。
2.class属性
class，类。思想和别的编程语言相似。
我们可以通过为同一个页面的相同元素或不同元素设置相同的
class，然后使得具有相同class得元素具有相同的样式。
3.形象理解
因为
id属性具有唯一性，所以它其实和我们的身份证号码一样，全国唯一。而
class不具唯一性，它就和我们的名字一样，全国有的人名字就是一模一样的。
二、选择器是什么
选择器，就是用一种方式把我们想要的那个元素选中。只有把它选中，我们才可以为这个元素添加
CSS样式。在
CSS中，有很多方式可以把我们想要的元素选中，这些不同的方式其实就是不同的选择器。选择器的不同，在于选择方式不同，但是它们的最终目的是一样的，那就是把想要的元素选中，然后才可以定义该元素CSS样式。我们也可以用一种选择器来代替另一种选择器，这仅仅是选择器不同而已，但目的都是一样的。
三、CSS选择器
CSS选择器非常多，以下是最常用的 5 种选择器：
- 元素选择器
- id 选择器
- class 选择器
- 后代选择器
- 群组选择器
可千万不要小看它们，这 5 种选择器使用频率占所有选择器的
80%以上。
CSS选择器格式
选择器{
属性1 : 取值1;
...
属性n : 取值n;
}
1.元素选择器
元素选择器，就是选中指定的相同的所有元素，然后给相同的元素定义同一个
CSS样式。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title></title>
<style type="text/css">
div{ /*元素选择器，选择所有的div标签*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span>見贤思齊</span>
<p>見贤思齊</p>
<strong>見贤思齊</strong>
<em>見贤思齊</em>
<div>見贤思齊</div>
</body>
</html>
元素选择器示例1.png
2.id 选择器
其实，id 选择器就像是我们的身份证号码一样，在同一个页面中，不允许出现 2 个相同的
id。我们可以为元素设置一个
id属性，然后针对设置了这个id的元素定义CSS样式，这就是id 选择器。
（1）#前缀
对于
id 选择器，id名前必须加上前缀#。不加的话，
id 选择器无法生效，只有加上前缀#，才表示这是一个id 选择器。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title></title>
<style type="text/css">
#hope{ /*id选择器*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span>見贤思齊</span>
<p>見贤思齊</p>
<strong id="hope">見贤思齊</strong>
<em>見贤思齊</em>
<div>見贤思齊</div>
</body>
</html>
id选择器示例1.png
3.class 选择器
class 选择器，即类选择器，就是可以对相同的元素 或 不同的元素定义相同的
class属性，然后针对拥有同一个class属性的元素进行CSS样式操作。
（1）.前缀
对于
class 选择器，class名前必须要加上前缀 .（注意：一定是英文的点）。否则
class 选择器无法生效，只有加上前缀.，才表示这是一个class 选择器。
（2）减少大量重复代码
要为两个及以上元素定义相同的样式，建议使用
class 选择器，因为可以减少大量重复代码。
（3）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
.dream{ /*class选择器*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span class="dream">見贤思齊</span>
<p>見贤思齊</p>
<strong class="dream">見贤思齊</strong>
<em>見贤思齊</em>
<div class="dream">見贤思齊</div>
</body>
</html>
class选择器示例1.png
4.后代选择器
后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其它后代元素。
（1）空格隔开
父元素和后代元素必须用空格隔开，从而表示选中某个元素内部的后代元素。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
/*后代选择器*/
#first div{
color:#00FFFF;
}
#second p{
color:#66A9FE;
}
</style>
</head>
<body>
<div id="first">
<span>見贤思齊</span>
<div>見贤思齊</div>
</div>
<div id="second">
<p>見贤思齊</p>
<span>見贤思齊</span>
<p>見贤思齊</p>
</div>
</body>
</html>
<!--
#first div,表示选中id为first元素下的所有div元素。
#second p,表示选中id为second元素下的所有p元素。
-->
后代选择器示例1.png
5.群组选择器
群组选择器，就是同时对几个选择器进行相同的操作。
（1）英文逗号,隔开
对于群组选择器，每个选择器之间必须用英文逗号“ , ”隔开。
如若不这么做，群组选择器无法生效。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
/*群组选择器*/
h3,#first div,p{
color:#00FFFF;
}
</style>
</head>
<body>
<h3>見贤思齊</h3>
<div id="first">
<span>見贤思齊</span>
<div>見贤思齊</div>
</div>
<p>見贤思齊</p>
<span>見贤思齊</span>
</body>
</html>
<!--
通过元素选择器，选择了所有 h3、p标签，
通过后代选择器，选择了id为first下的div标签。
另外，若再加上span标签，所有span标签都会被选中，此处未写上。
-->
群组选择器示例1.png
网友评论