也稱為選取器，作用是讓你能夠修改指定的元素，下面介紹常用的選擇器
又稱型態選擇器，用來選擇需要修改的元素
h1{
color:red
}
以「狀態」為對象更改樣式，最常使用的情境是在連結 <a>
:hover :代表滑鼠滑過去時會變更樣式，下例會變為紅色:active :代表滑鼠點擊時會變更樣式，下例會變為綠色a {
color:blue;
}
a:hover{
color: red;
}
a:active{
color: green;
}
已自行定義的(類別)為對象更改樣式，可以在有許多相同標籤的情況下只更改指定的元素，為最常用的選擇器
下例假設我只想讓第一段<p>更改顏色但其餘段落不改，所以將第一個段落加上類別，也就是class="first"
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<title>我是網站標題</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>標題</h1>
<p class="first">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam ullam totam, praesentium est dicta incidunt asperiores veniam obcaecati eaque.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam ullam totam, praesentium est dicta incidunt asperiores veniam obcaecati eaque.
</p>
</body>
</html>
接著在css裡加上類型選擇器(用符號.加上類別名稱)
.first {
color: blue;
}
結果如圖
這個後代指的是父類別跟子類別中的子類別，可以用此選擇器選取某個類型或元素底下的子元素
基本語法如下
父元素/類別 子元素/類別 {
}
舉個例
<div class="box">
<h1>標題</h1>
<p class="first">段落</p>
<p>段落</p>
</div>
.box {
color: blue;
}
如果只需要 h1 變顏色，可以這樣寫
.box h1{
color: blue;
}
!
如果只希望第一個段落變色，可以這樣寫
.box .first{
color: blue;
}
iThome鐵人賽
看影片追技術
看更多