（2）選擇器：class選擇器、id選擇器、關聯選擇器、組合選擇器、偽元素選擇器
阿新 • • 發佈：2018-12-26
就是制定css要作用的標籤，那個標籤的名稱就是選擇器，意為選擇哪個容器
（1）class選擇器，使用的是標籤中的屬性。在一個網頁中可以定義多個style
指定哪個類用”.”
<style>
div{
background-color:#F00;
color:#FF9;
}
//制定哪個選擇器，哪個類用這種格式
div.haha{
background-color:#3C9;
color:#FF9;
}
span.haha{
background-color:#3C9;
color <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 每個標籤都定義了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>