我們要給一個元素設定樣式，可以通過css設定樣式，但是css要怎麼找到這個元素呢？這就需要為css設定選擇器，就是為css選一個html标簽元素。
标簽選擇器：就是把标簽名寫上。寫法是：元素名{ }
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
div{
color:red;
font: italic bold 20px "黑體";
}
</style>
</head>
<body>
<div>卡特琳娜</div>
</body>
</html> 類選擇器：為元素加上一個類名。用 . 代表類。
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
.div1{
color:red;
font: italic bold 20px "黑體";
}
</style>
</head>
<body>
<div class="div1">卡特琳娜</div>
</body>
</html> id選擇器：為元素添加一個id名（最好不要用這個，因為到js的時候會用到id）。用#代表id。#id名{ }
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
#div1{
color:red;
font: italic bold 20px "黑體";
}
</style>
</head>
<body>
<div id="div1">卡特琳娜</div>
</body>
</html> 通配符* 就是隻要用了* 所有的标簽都會有這個樣式。
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<div>卡特琳娜</div>
<p>卡特琳娜</p>
<span>卡特琳娜</span>
</body>
</html> 後代選擇器：所謂的後代，就是一個标簽裡面所包含的所有标簽都叫它的後代（兒子、孫子）。寫法：父标簽 後代标簽{}
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
div p{
color:red;
}
</style>
</head>
<body>
<div>
<div>你好</div>
<p>你也好</p>
<span>大家好才是真的好</span>
</div>
</body>
</html> 這就是隻有p标簽有樣式，其它的标簽沒有樣式。
子标簽選擇器：就是隻有兒子才會有樣子，孫子就不給樣式。寫法：元素名>子元素名{ }
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
div>p{
color:red;
}
</style>
</head>
<body>
<div>
<span>
<p>我是孫子标簽内的文字</p>
</span>
<p>我是兒子标簽裡的文字</p>
</div>
</body>
</html> 
并集選擇器：就是一個樣式作用于兩個元素上面，兩個元素名之間用逗号隔開。寫法：元素名，元素名{ }
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
.div1,.div2{
color:red;
}
</style>
</head>
<body>
<div class="div1">我是男人</div>
<p class="div2">我不是男人</p>
</body>
</html> 交集選擇器：查找固定名字的固定标簽元素。寫法：元素名.類名或id名{ }
<!DOCTYPE html>
<html zh-CN">
<head>
<meta charset="UTF-8">
<title>标簽</title>
<style type="text/css">
div.div1{
color:red;
}
</style>
</head>
<body>
<div>
<div class="div1">空虛</div>
<p class="div1">寂寞</p>
<div class="div3">冷</div>
</div>
</body>
</html> 