一.选择器：
1.元素选择器。
格式： 元素名称{
css样式
}
2.id选择器。---一对一修改
a.需要给要进行样式设置的标签，添加id属性，设置一个唯一值
b.通过id选择器访问到id为jack的元素，进行样式的修改
格式： #id的名字{
css样式
}
3.class选择器。 ---一对多选择器。（类选择器）
a.需要给要进行样式设置的标签，添加class属性，设置 一个统一值
b.通过class选择器访问到class为lo的元素，进行样式修改
格式： .class的名字{
class的样式
}
注意：如果要给一个标签添加多个class属性，格式：class="名称一 名称二 名称三"
<!DOCTYPE html>
<html>
<!--CSS作用：给 HTML标签添加样式，让网页变得美观-->
<!--CSS代码写在 style标签中-->
<!--CSS需要配合选择器来做样式 的修改 -->
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/*CSS是写在这个位置的， 写到style标签中间.*/
p{
/*要对p元素修改的css样式*/
/*背景颜色 ：background-color*/
/*文字颜色 ：color */
background-color: yellow;
}
#jack{
/*文字颜色*/
color: red;
}
.lo{
/*文字大小*/
font-size:50px;
}
</style>
</head>
<body>
<!--body中经常写html结构，html标签代码-->
<p id="jack">马云说：我对钱不感兴趣</p>
<p class="lo">王健林：先定一个小目标，挣他一个亿</p>
<a href="#" class="lo">刘强东：我脸盲，认不出谁是美女</a>
<p class="lo">张硕长得真的好帅</p>
<!--
需求：
1.将所有的p元素 背景改为黄色
2.将第一的p元素 文字改为红色
3.将 第二个p元素和第三个p元素以及a标签，文字大小 改为50px.
-->
</body>
</html>
示例图示：
二. 选择器的优先级
Id选择器 > class选择器 > 元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器优先级</title>
<style type="text/css">
p{
background-color: yellow;
}
.study{
background-color: red;
}
#happy{
background-color: blue;
}
</style>
</head>
<body>
<p class="study" id="happy">学习使我快乐，单身使我快乐</p>
<!--
需求：
1.修改p标签的背景颜色
优先级：id选择器 > class选择器 > 元素选择器
作用域：id选择器 < class选择器 < 元素选择器
-->
</body>
</html>
示例图示：
由此可知id选择器的优先级最高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器优先级</title>
<style type="text/css">
p{
background-color: yellow;
}
.study{
background-color: red;
}
</style>
</head>
<body>
<p class="study" id="happy">学习使我快乐，单身使我快乐</p>
</body>
</html>
示例图示：
由此可知：class选择器优先级 > 元素选择器
三. 作用域范围的区别
id选择器 < class选择器 < 元素选择器