1.首先我们要知道什么是选择器？
选择器是通过一定的语法规则选取对应HTML标记，然后给对应的HTML标签设置样式。比如：长度，宽度，颜色等等。
2.选择器类别
选择器一共有四类：
1基本选择器，2复合选择器，3伪类选择器，4属性选择器
下面是我们本节的内容：
3.基本选择器（四种）
（1）通用选择器
格式：*{属性：值；}
注意：使用该选择器会匹配所有的标签，不常用，IE6不支持。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style type="text/css">
/* 使用嵌入式 */
/* *{属性：值；} */
*{
color:#f02; /* 设置文本为红色 */ /* CSS优先级要高于html的 */
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1>火影忍者</h1>
<ul>
<li>漩涡鸣人</li>
<li>佐助</li>
<li>小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
此处大家可以发现，即使用了html的font 标签设置了文本样式，又采用了CSS的通用选择器设置了样式，最终结果为CSS通用选择器设置的样式，表明通用选择器的优先级较高，优先级我会在后面的文章中介绍。
网页效果：
（2）标签选择器
格式：标签名{属性：值；}
注意：实用型，选择性的修改
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 使用标签选择器 */
/* 标签名{属性：值；} */
h1{
color:#f00; /* 给指定的标签设置样式 */
}
h2{
color:#f00;
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1>火影忍者</h1>
<h2>疾风传</h2>
<ul>
<li>漩涡鸣人</li>
<li>佐助</li>
<li>小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
网页效果：
（3）类选择器
格式：.class属性值{属性：值；}
注意：class属性值设置可以相同，不同标签可以设置相同的属性值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 使用类选择器 */
/* .class{属性：值；} */.h{
color:#f00;
}
/* 先找到h2标签，在找到h标签，进行操作 */
h2.h{
color:#00f;
}.li{
color:#f00;
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1 class="h">火影忍者</h1>
<h2 class="h">疾风传</h2>
<ul>
<li class="li">漩涡鸣人</li>
<li>佐助</li>
<li class="h">小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
网页效果：
（4）id选择器
格式：#id属性值{属性：值；}
注意：每个ID只能使用一次
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 使用id选择器 */
/* #id的属性值{属性：值；} */#h{
color:#00f;
}
#h1{
color:#20550e;
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1 id="h">火影忍者</h1>
<h2 id="h1">疾风传</h2>
<ul>
<li >漩涡鸣人</li>
<li>佐助</li>
<li >小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
网页效果：
（5）强调
类选择器和id选择器设置的值：
（1）必须是字母或者字母和下划线开头
（2）最好不要用保留字
（3）不能出现除了下划线或连字符以为的符号
比如：id=“123”就是错误的。
本期讲解到此结束，大家如果有不懂的地方可以私信，只要有时间一定回复哦。
如果文字过于枯燥，不懂还可以观看的视频，进一步加深理解哦。
博主的哔哩哔哩账号：一枫阳光，感兴趣的可以关注一下哦。定期更新CSS代码学习。萌新UP主大家一起进步呀。讲解若有不对，一定第一时间修改，谢谢大家啦。
网页制作—CSS选择器讲解_哔哩哔哩_bilibili今天给大家讲解一下CSS的选择器，通过选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1eL4y1M7Qk?spm_id_from=333.999.0.0网页制作—CSS选择器2（标签选择器）_哔哩哔哩_bilibili今天给大家讲解一下CSS的选择器，通过选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1U34y1t7UV?spm_id_from=333.999.0.0
【网页制作】—CSS选择器3（类选择器）_哔哩哔哩_bilibili今天给大家讲解一下CSS的类选择器，通过选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1DY4y1i7EB?spm_id_from=333.999.0.0【网页制作】—CSS选择器4（id选择器）_哔哩哔哩_bilibili今天给大家讲解一下CSS的id选择器，通过id选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1zu411q7Yr?spm_id_from=333.999.0.0
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
