選擇器
1.標籤選擇器
它會選中當前頁面所有的標籤。
具體事例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*<!--標籤選擇器：他會選中當前頁面所有的標籤-->*/
li{
color: red;
font-size: 20px;
}
</style>
<title>css的選擇器</title>
</head>
<body>
<ul>
<li>山東科技大學</li>
<li>煙臺大學</li>
<li>魯東大學</li>
<li>山東工商學院</li>
<li>青島理工大學</li>
</ul>
</body>
</html>效果圖：
2.id選擇器
它會選中當前頁面一個匹配的id元素的標籤，同一頁面,id不能重複。
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#yt{
/*id選擇器選中當前頁面一個匹配id的元素，同一個頁面，id不能重複*/
color: red;
}
</style>
<title>id選擇器</title>
</head>
<body>
<ul>
<li id="yt">山東科技大學</li>
<li>煙臺大學</li>
<li>魯東大學</li>
<li>山東工商學院</li>
<li>青島理工大學</li>
</ul>
</body>
</html>效果圖如下：
3.類選擇器
它會將與之匹配的元素歸爲一類。
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*類選擇器：將與之匹配的元素歸爲一類*/
.yt{
color: red;
}
</style>
<title>類選擇器</title>
</head>
<body>
<ul>
<li class="yt">山東科技大學</li>
<li class="yt">煙臺大學</li>
<li class="yt">魯東大學</li>
<li>山東工商學院</li>
<li>青島理工大學</li>
</ul>
</body>
</html>效果圖如下：
4.僞類選擇器
CSS 僞類用於向某些選擇器添加特殊的效果。
將以上所寫的所有選擇器做一個的事例（方便理解）：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
padding: 0px;
margin: 0px;
}
div{
background-color: yellow;
height: 50px;
}
ul{
list-style: none;
font-size: 20px;
color: red;
}
li{
float: left;
width: 210px;
line-height: 50px;
}
li:first-child{
margin-left: 50px;
}
</style>
<title>列表實現導航欄佈局</title>
</head>
<body>
<div>
<ul>
<li>購物車</li>
<li>幫助中心</li>
<li>加入收藏</li>
<li>設爲首頁</li>
<li>登錄</li>
<li>註冊</li>
</ul>
</div>
</body>
</html>效果圖如下：
還有不常用的其他選擇器：後代選擇器，子代選擇器，相鄰選擇器等等，這裏就不總結了。
樣式
1.行內樣式
特點：
1.樣式和表現沒有分離。
2.樣式沒有重用性。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div</title>
</head>
<body>
<div style="height: 80px;background-color: black"></div>
<div style="height: 40px;background-color: red"></div>
</body>
</html>在div中加入style的屬於行內樣式。
2.內部樣式
特點：
1.樣式和表現分離。
2.樣式有一定的重用性。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
</style>
<title>div</title>
</head>
<body>
<div></div>
<div></div>
</body>
</html>在head中的寫入style的屬於行內樣式。
3.外部樣式
特點：
1.樣式和表現完全分離。
2.樣式有重用性。
單獨寫一個css文件的屬於外部樣式。