在撰寫網頁樣式時，我們調整畫面樣式需要透過 css 選擇器去找到 html 中的元素，再對其下對應的 css 屬性，本篇文章將描述各種網頁開發常見的 css 選擇器
通用選擇器
- 使用 * 號表示
- 樣式對 html 中所有的元素都生效
* {
outline: 1px solid red;
}元素選擇器
- 直接以 html 標籤名表示
- 樣式對指定元素生效
span {
outline: 1px solid red;
}<!-- 以下元素將產生紅外框 -->
<span>hello world<span>id 選擇器
- 以 # 表示
- 樣式對指定 id 生效
#btn {
outline: 1px solid red;
}<!-- 以下元素將產生紅外框 -->
<button id="btn">click me<button>class 選擇器
- 以 . 表示
- 樣式對指定 class 生效
.title {
outline: 1px solid red;
}<!-- 以下元素將產生紅外框 -->
<h1 class="title">hello world</h1>交集選擇器
- 由多種選擇器串接組成，所有選擇器需要同時滿足才會生效
/* 需要同時為 h2 標籤且有 title class 才生效 */
h2.title {
outline: 1px solid red;
}<h1 class="title">hello world</h1>
<!-- 以下元素將產生紅外框 -->
<h2 class="title">hello world</h2>並集選擇器
- 將一種樣式讓多個選擇器去套用，以 , 隔開
/* p 標籤與有 content class 的元素都應用此樣式 */
p, .content {
outline: 1px solid red;
}<!-- 以下元素將產生紅外框 -->
<p>lorem 123</p>
<!-- 以下元素將產生紅外框 -->
<span class="content">lorem 456</span>子選擇器
- 以 > 表示，父元素 > 子元素
- 只能向內選到一層
/* .content 子層中(內一層)的 .link 應用此樣式 */
.content > .link {
outline: 1px solid red;
}<p class="content">
Lorem, ipsum dolor sit amet
<!-- 以下元素將產生紅外框 -->
<a class="link" href="https://google.com">google</a>
consectetur adipisicing elit. Ab, animi.
</p>後代選擇器
- 使用 (空格)表示
- 可以向內選多層
/* .box 後代(向內任意層)中的 .btn 套用此樣式 */
.box .btn {
outline: 1px solid red;
}<div class="box">
<div>
<div>
<!-- 以下元素將產生紅外框 -->
<button class="btn">click me</button>
</div>
</div>
</div>兄弟選擇器
- 第一種使用 + 表示
- 選到同層的下一個元素
h1 + span{
outline: 1px solid red;
}<h1>title</h1>
<!-- 以下元素將產生紅外框 -->
<span>hello</span>- 第二種使用 ~ 表示
- 選到同層的下任意個元素
h1 ~ span {
outline: 1px solid red;
}<h1>title</h1>
<h2>sub title</h2>
<!-- 以下元素將產生紅外框 -->
<span>hello</span>屬性選擇器
- 以 [ ] 表示
- 透過 html tag 上面的屬性來選擇
input[type='number'] {
outline: 1px solid red;
}<!-- 以下元素將產生紅外框 -->
<input type="number" />
