一.選擇器：
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選擇器 < 元素選擇器