CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS的选择器分为两大类：基本选择题和扩展选择器。
基本选择器：
- 标签选择器：针对一类标签
- ID选择器：针对某一个特定的标签使用
- 类选择器：针对你想要的所有标签使用
- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
1、标签选择器：选择器的名字代表html页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
<style type="text/css">
p{
font-size:14px;
}</style>
<body>
<p>css</p>
</body>
再比如说，我想让“学完了html，继续学css哟”这句话中的“css”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>学完了html，继续学<span>css</span>哟</p>
</body>
</html>
[总结]需要注意的是：
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
2、ID选择器：规定用#来定义（名字自定义）
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="mytitle">你好</h2>
</body>
id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
一个标签可以被多个css选择器选择：
比如，我们可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：
3、类选择器：规定用圆点.来定义
、针对你想要的所有标签使用。优点：灵活。
css中用.来表示类。举例如下：
<style type="text/css">
/*定义类选择器*/
.oneclass{
width:800px;
}
</style>
</head>
<body>
<h2 class="oneclass">你好</h2>
</body>
和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次
class属性的特点：
特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下
问题：到底用id还是用class？
答案：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。
我们记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。
上面这三种选择器的区别：
- 标签选择器针对的是页面上的一类标签。
- ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
- 类选择器可以被多种标签使用。
扫一扫
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
