就是制定css要作用的标簽，那個标簽的名稱就是選擇器，意為選擇哪個容器
（1）class選擇器，使用的是标簽中的屬性。在一個網頁中可以定義多個style
指定哪個類用”.”
<style>
div{
background-color:#F00;
color:#FF9;
}
//制定哪個選擇器，哪個類用這種格式
div.haha{
background-color:#3C9;
color:#FF9;
}
span.haha{
background-color:#3C9;
color:#FF9;
}
</style>
<!--若希望所有的選擇器中帶hehe的都是相同效果，可以用.hehe{},這樣就能有效提高代碼複用性-->
<style>
.hehe{
background-color:#36F;
color:#F69;
}
<!--.enen:是預定義樣式，可以作用在任何選擇器的類名為enen中，可以實作動态加載
<!-- 比如開始的網頁是一種顯示，當點某個按鈕或其他操作時，該網頁會出現新的效果
-->
</style> <p class="hehe">這是一個段落2</p> （2）id選擇器就是标簽中的id屬性
<style type="text/css">
div#qq{
background-color:#F39;
color: #FF3;
}
span#qq{
background-color:#F39;
color: #FF3;
}
</style>
<style type="text/css">
#pp{
background-color:#0FC;
color: #F00;
}
</style> 每個标簽都定義了class屬性和id屬性，用于對标簽進行辨別，友善對标簽進行操作。
通常id的取值在頁面上是唯一的，因為該屬性除了css使用，還可以被jsp使用。id通常都是為了辨別頁面中的一些特定區域使用的
優先級：标簽選擇器<類選擇器
<!--若隻寫b則将頁面的所有b标簽全都改成了這種樣式-->
<!--若隻是對span中的b标簽進行格式修改，用span+空格+b -->
span b{
background-color:#F00;
color:#FF9
} <span >span<b>區域</b>1</span> 四、組合選擇器
對多個選擇器進行相同樣式設定，選擇器間用“，”隔開
//對.haha選擇器和div中的b選擇器進行樣式修改
<style>
.haha,div b{
background-color:#0C0;
color:#F00;
}
</style> 五、僞元素選擇器
格式：标簽名：僞元素
（1）超連結
a:link 超連結未點選狀态
a:hover 光标移動到超連結上的狀态
a:active 點選超連結時的狀态
a:visted 被通路後的狀态
順序：L-V-H-A
（超連結一般預設都有樣式，例如下劃線、點選後文字顔色改變，這些都可以自定義）
<style>
/*
未通路
*/
a:link{
color:#906;
text-decoration:none;
font-size:18px;
}
/*
滑鼠懸停
*/
a:hover{
color:#F00;
font-size:24px;
}
/*
點選效果
*/
a:active{
color:#0F0;
font-size:36px;
}
/*
通路後的效果
*/
a:visted{
color:#30F;
text-decoration:line-through;
}
</style>
</head>
<body>
<a href="http://www.sina.com.cn" target="_blank">僞元素選擇器示範</a>
</body> （2）
p:first-line 段落的第一行文本
p:first-letter段落中的第一個字母
:focus具有焦點的元素
<style>
p:first-letter{
font-size:36px;
color:#F00;
}
p:first-line{
font-size:18px;
color:#0F0;
}
input:focus{
background-color:#F00;
}
</style>
![css僞類與僞元素差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)