CSS複合選擇器

【CSS教學】Day05 – CSS複合選擇器，用對方法能縮減代碼量 (詳細解說)

Leave a Comment / CSS學習指南, 技能 / By

經過我們前面CSS教學後開始進行開發後你是不是發現有時候在寫 CSS 屬性代碼，有很多改變一個東西我就要寫一次去聲明，那寫一百個一千個都重複的就算我能夠使用複製貼上但你可能還是受不了這樣一直重複性工作，是不是厭倦這樣子操作呢? 是的我也是所以本篇文章會教你如何使用一些方法和技巧，就能夠讓那些重複性的代碼不在出現，讓你在開發過程中效力大大提高那我們趕快來介紹一下吧!

  • 什麼是複合選擇器?
  • 複合選擇器由那些所組成的?
  • 常用的複合選擇器包含哪些?
點我瞭解 小青如何每月多賺5位數台幣

CSS 後代選擇器是什麼?

CSS後代選擇器是什麼呢

後代選擇器是一個非常重要的選擇器，可以說天天都在使用，後代選擇器又稱為包含選擇器，好像有點難理解也就是說它能夠選擇父元素裡頭的子元素，再說更簡單好理解的例子，今天我們辦父子座談會幫孩子安排位子前也需要安排爸爸的位置，爸爸排完才排孩子，這樣做法就是先幫爸爸坐定位有了定位後兒子在那裡就好清楚。

那今天爺爺來了呢? 也是一樣爺爺、爸爸還有孫子，那後代選擇只會選擇輩分最小的那位唷! 如果沒有孫子使用後代選擇器就只會定位爸爸的，因為爸爸是爺爺的後代。

CSS 後代選擇器如何使用?

CSS後代選擇器如何使用

我們來看看下列例子示範看看是如何使用後代選擇器 ( 包含選擇器 )，首先們先寫好 HTML 元素標籤的骨架，使用 <ul> 無序列表標籤以及 <ol> 有序列表標籤創立各三個 <li> 子標籤。

<body>
	<ul>
		<li>我是ul的孩子</li>
		<li>我是ul的孩子</li>
		<li>我是ul的孩子</li>

	</ul>

	<ol>
		<li>我是ol的孩子</li>
		<li>我是ol的孩子</li>
		<li>我是ol的孩子</li>

	</ol>

</body>

寫好 HTML 我們需要的骨架內容後，接下來要來寫 CSS 屬性樣式，我們的目的是要把 <ul> 無序列表標籤裡的所有子項目 <li> 標籤裡頭的字體改成其他紅色顏色，而 <ol> 有序列表標籤裡頭的所有 <li> 標籤字體顏色通通改成藍色，CSS 屬性寫法就是先選擇父親元素 ul 和 ol 後面在打空格街個打 li，這樣就能個別選擇了唷!

<style>
	ul li{
		color: red;
}

ol li {
	color: blue;

}

</style>

我們來看看後代選擇器 ( 包含選擇器 ) 的格式規範吧! 如下表示

元素1 元素2 { 屬性值聲明 }
  • 元素 1 和元素 2 之間要使用空格隔開
  • 元素 1 和元素 2 就是前幾篇文章說的就是基礎選擇器
  • 只要有兩個以上寫法就會變成後代選擇器 ( 包含選擇器 )
  • 元素 1 一定是父親
  • 元素 2 一定是元素 1 的孩子，以此類推
  • 最終結果一定是定位改變孩子
  • 元素 1 和元素 2 可以是任意的基礎選擇器
點我瞭解 小青如何每月多賺5位數台幣

CSS 後代選擇器總結

CSS後代選擇器總結

你可能會想，我改變 <ul> 無序列表標籤裡頭的 <li> 標籤字體顏色改成紅色和 <ol> 有序列表標籤裡頭的 <li> 標籤字體顏色改成藍色，只要個別在 li 取個 Class 名稱就好啦! 是不是，你這樣想沒錯但是呢如果今天有上百個 <li> 你都要取名那部就會累死，CSS 代碼屬性也只會越寫越多的。

<style>
	ul li{
		color: red;
}

.nav li {
	color: blue;

}

</style>

所以前端開發人員都會選擇使用後代選擇器的寫法，就能夠有效的去縮短代碼的量唷! 一樣目的都可以達成差別就在於你是否能快速又更有效率，日後維護也比較方便友善，聰明的你知道該選什麼方法使用了吧!!!

CSS 子選擇器是什麼?

CSS子選擇器是什麼

接下來我們小青我來介紹第二大類的子選擇器，那子選擇器又稱為子元素選擇器 ( 子選擇器 )，它的使用場景是選擇孩子，你可能會說! 那跟剛剛介紹的後代選擇器一樣呀! 也是選擇孩子，確實是這樣但是還是有差異的唷!

差異在於子選擇器是選擇最近一級子元素，講簡單來理解的話就是選擇爸爸的親兒子，跟你孩子沒有任何關係，因為只會選一級，要記得是只有一級唷! 所以就跟剛剛是完全不一樣的，如果該當前元素場景很複雜，有爺爺有爸爸有你還有你孩子，那你要選爺爺的兒子就好就只要使用子選擇器選擇爺爺和爸爸就好就可以了，因為只有一級關係

  • 子選擇器只會選擇最近的一級關係
  • 子選擇器例子，爺爺、爸爸、孫子，選爺就鎖定爸，選爸就鎖定孫子
  • 子選擇器，只有兩人世界

CSS 子選擇器如何使用?

CSS子選擇器如何使用

來看看子選擇器在實際是如何使用的吧! 其實不難的我們先把 HTML 骨架寫好，這次我們來創建一個 <div> 盒子標籤，div 盒子我們現在還沒開始介紹它的應用，不過沒關係它就是一個盒子一個模塊能夠存放所有東西，今天我們要在裡頭放兩個 <a> 錨點鏈結標籤和一個段落標籤。

  • 創建 HTML 骨架
  • 創建一個 div 盒子
  • div 盒子中裡創建一個 <p> 段落標籤以及 <a> 錨點鏈結標籤
  • 又在 <p> 標籤裡頭創建一個 <a> 錨點標籤，形成父子關係
<body>
	<div class="grp">
		<p><a href="#">我是孫子</a></p>

		<a>我是兒子</a>

	</div>
	
</body>

完成後我們來分析一下這個 HTML 骨架結構的關係，首先我們看看 <div> 盒子標籤是最大的，裡面有兩個標籤 <p> 段落標籤以及 <a> 錨點鏈結標籤，它們兩個是兄弟關係，它們兩個的爸爸是 <div> 盒子標籤，這樣沒問題吧! 我們再往裡面看 <p> 段落標籤裡面還有個 <a> 錨點鏈結標籤，這兩者之間也是父子關係，但從另一個角度看也就是從這個 <a> 錨點鏈結標籤往上看到 <div> 盒子標籤，會是爺爺與孫子關係，這樣你應該也沒問題吧! 我們梳理一下訊息。

  • <div> 盒子標籤是爺爺，也就是第一層
  • <p> 段落標籤以及 <a> 錨點鏈結標籤是爺爺的孩子，屬於父子關係
  • <p> 段落標籤以及另一個 <a> 錨點鏈結標籤，兩者關係是兄弟關係
  • <p> 段落標籤裡頭的 <a> 錨點鏈結標籤是屬於父子關係
  • <p> 段落標籤裡頭的 <a> 錨點鏈結標籤往上看向 <div> 盒子標籤，是他的爺爺

OK! 那現在我們了解關係後要開始著手試試看怎麼用子選擇器來控制囉! 如果還沒搞清楚各層關係可以停下來好好思考一下，並動動你的小手寫寫看代碼才會比較好理解，接下來我們來寫 CSS 屬性代碼控制，我想要控制 <div> 盒子標籤的兒子 <a> 錨點鏈結標籤改成字體顏色為紅色，如下表示。

<style>
	.grp > a {
		color: red;
}
</style>

這樣做就能夠只能選取 <div> 盒子標籤的兒子進行 <a> 錨點鏈結標籤改成字體顏色為紅色，大於號就是選擇改變孩子，也就是改變第一級標籤。

元素1 > 元素2 { 屬性值聲明 }

我們從上述語法表示來看元素 1 標籤裡面的所有後代也就是兒子 ( 子元素 ) 元素 2 進行 CSS 屬性值聲明的改變，元素 1 和元素 2 中間必須使用大於號隔開，元素 1 是父級，元素 2 是子級，使用這種子選擇器最終選擇是元素 2。

  • 元素 1 和元素 2 中間會用大於號 ( > ) 隔開
  • 元素 1 是爸爸 ( 父級 )
  • 元素 2 是兒子 ( 子級 )
  • 使用子元素選擇器，最終只會選擇元素 2 子元素
  • 孫子不歸子選擇器管
點我瞭解 小青如何每月多賺5位數台幣

CSS 並集選擇器是什麼?

CSS並集選擇器是什麼

我們先來看看並集選擇器的使用場景有那些呢? 它能夠選擇多組 HTML 元素標籤，並同時為他們定義相同的樣式，簡單來說有多組一樣的 HTML 元素標籤，今天我們就能夠使用並集選擇器一次全部選出來進行樣式的改變，這樣的用法通常叫集體聲明。

CSS 並集選擇器如何使用?

CSS並集選擇器如何使用

經過上一節的介紹並集選擇器是什麼，我們知道了一些原裡以及應用方式，那接下來我們來看看並集選擇器是如何去使用的以及該怎麼使用，首先我們在 HTML 結構裡創建之前我們所學的 <div> 盒子標籤、<p> 段落標籤、<ol> 有序列表標籤全部寫出來，他們的關係都是兄弟關係，如下表示。

<body>
	<div>我是小明<div>
	<p>我是小張<p>
	<ol class="name">
		<li>我是小強</li>
		<li>我是小花</li>

	</ol>

</body>

創建好後我們需要把 <div> 盒子標籤和 <p> 段落標籤給選出來改變他們的顏色改成紅色，OK! 你用以前的方法是不是就是直接寫 <div> 和 <p> 單獨寫 CSS 屬性給紅色或是通過 class ( 類 ) 選擇器，但是這樣需要寫好幾行代碼，也會產生重複性的代碼，為了方便快速並集選擇器這時候就發揮功能性了，我們來看看要怎麼寫，如下表示。

<style>
	div, p{
		color: red;
}

</style>

這樣就能個別選出來了唷! 需要使用逗號隔開，逗號這裡想成和的意思，簡單來說就是你和他還有她只要有點名到的就可以使用逗號隔開來，就是 <div> 和 <p> 以上就是並集選擇器的基本使用方式，是不是方便又快速呢!

  • 並集選擇器使用逗號分割
  • 任何選擇器都能使用並集選擇器
元素1, 元素2 { CSS屬性值聲明 }
  • 元素 1 和元素 2 中間用逗號隔開
  • 逗號可以理解為和或是以及的意思
  • 並集選擇器是用在集體聲明

再來我們來說並集更深層的意思，它沒有階層關係，也就是說沒有父子關係或是爺爺與孫子關係，今天我指名到的元素，會改變當前選定的元素裡頭所有子元素唷! 意思是說選中就全改，我們來看看下列例子寫法，一樣我們用到剛剛用的 HTML 骨架，CSS 屬性可以這樣寫。

<style>
	div, 
	p, 
	.name li {
		color: red;
}
</style>

在這邊我們選中 <ol> 有序列表標籤指定也一起改變成紅色，這裡你會說這樣寫法也可以唷! 可以唷只要是有逗號隔開就能了，並集選擇器可以是任何形式的選擇器，這點是它的特色之一，並集選擇器還會豎著寫因為這樣會比較好觀察自己選了那些元素屬性，一般前端開發都會這樣寫，到開發結束後打包上傳會進行壓縮格式，所以不需要擔心佔用太多行唷!

  • 最後一個選擇器不需要在後面加逗號唷，不然會報錯
點我瞭解 小青如何每月多賺5位數台幣

CSS 偽類選擇器是什麼?

CSS偽類選擇器是什麼

最後我們來看看最後一個偽類選擇器，如中文意思偽有偽裝隱藏起來的意思，那我們想想看在網站中我們會在什麼時候用到這功能呢?! 如果沒頭緒沒關係，最典型的是我們會有時候點擊網站中的連結時會有特殊的效果，例如反白呀或是有什麼特別的動化效果，當然越複雜的效果還是需要依靠JavaScript 一起搭配 CSS 才能呈現，但我們只先講 CSS 屬性的偽類最基本選擇器。

  • 選中連結會有特別效果
  • 滑鼠移開連結效果會消失
  • 移過去有效果，移開會消失，就是偽類選擇器

CSS 偽類選擇如何使用?

CSS偽類選擇器如何使用

那我們來看看實際上我們怎麼實現這個效果的，偽類選擇器最大特點是在選定 HTML 結構後並在 CSS 屬性中添加冒號符號表示，例如，:hover 或是 :fire-child，我們可以先不管它是什麼意思，只要知道如果要使用偽類選擇器功能的話，開頭一定要寫冒號唷! 不然無法觸發該功能效果的，下列我們來看看實際撰寫應用吧!

<body>
	<a herf="#">我是鏈接</a>

</body>

這裡小青先說偽類選擇器的功能太多種了，例如結構偽類、鏈結偽類…等超多超多，功能越多是對我們越好，只要你想得到的功能基本上都已經有前輩都寫好了，根據需求我們去找出來應用即可，但是這篇我們就大概提到一般前端人員最常用到的偽類選擇器就好囉! 如果你需要每個都玩看看可以自己去查並試用唷!

點我瞭解 小青如何每月多賺5位數台幣

CSS 鏈結偽類選擇器如何使用?

CSS鏈結偽類選擇器如何使用

那鏈接偽類怎麼使用呢? 從字面上來看就是跟鏈結有相關，就是我們滑鼠接近 <a> 錨點鏈結標籤會出現變色和有下滑線的效果，滑鼠一離開就會消失，這種效果在很多網站都會看到很常去使用的效果，現在我們來看看要如何來寫，一樣我們用我們之前寫好的 HTML 結構骨架來做示範。

<body>
	<a herf="#">我是鏈接</a>

</body>
  • a : link ( 選取所有未被訪問的鏈結 )
  • a : vidited ( 選取所有已被訪問的鏈結 )
  • a : hover ( 選取滑鼠在於該連接上方 )
  • a : active ( 滑鼠按下未放開時鏈結呈現特別效果 )

在我們剛寫好 HTML 結構骨架，你會發現就是呈現藍色和自帶下劃線效果，現在你就能夠分別在 CSS 屬性中填入你想要讓 <a> 錨點鏈結標籤呈現怎樣的效果都可以唷!

<style>
	a:link{
		color: red;
}
</style>

我們使用 a:link 讓未訪問的鏈結呈現紅色，這樣就能夠使原本未訪問鏈結藍色改變成紅色唷! 如果你要取消下劃線效果，當然可以，可以使用之前我們學過的文本教學去取消下劃線 text-decoration，如果忘記的話可以去複習那個那篇文章唷!

<style>
	a:link{
		color: red;
		text-decoration: none;
}
</style>

那其他三種效果你自己分別試試看效果功能吧! 只有自己試過才知道以後看到別人網站是用那些功能來做的唷! 歡迎多加練習

鏈結偽類選擇器該注意什麼?

CSS鏈結偽類選擇器該注意什麼

在這節我們要來聊聊鏈結偽類選擇器在撰寫時需要注意的事項，還有你在實際開發中偽類選擇器的一些寫法，我們先來看看撰寫時需要注意的事項吧! 主要有以下幾點。

  • 為了確保是否偽類鏈結有生效，須注意順序使用
  • 順序如下
    • :link
    • :visited
    • :hover
    • :active
  • <a> 錨點鏈結標籤實際都有默認樣式，改變的話需要特別使用 CSS 屬性單獨指定樣式

以上最重要是使用到給鏈結偽類選擇器多功能狀態要記得是有順序的，如果都有使用到就要按造順序的優先級進行排列，如果不遵守的話就不能順利被加載唷! 不信的話你可以試試看是不是這樣，假設我們都有用到這 4 個效果，那我們把 :visited 和 :active 的順序互相調換，你覺得還會呈現出該功能嘛?

接下來來說說實際開發中我們會怎麼樣去寫鏈結偽類選擇器，一般平時鏈結狀態我們就寫好 CSS 屬性，等到滑鼠動作要記住有用到冒號都是要觸發滑鼠的動作才會呈現效果，那呈現什麼效果你在寫到該冒號加上屬性名稱裡頭就好了，這樣的寫法比較有結構性唷!

a {
	color: red;
	text-decoration: none;
}

a:hover {
	color: green;

}
點我瞭解 小青如何每月多賺5位數台幣

:focus偽類選擇器是什麼?

CSS focus偽類選擇器是什麼

剛剛我們說了 4 個偽類選擇器，接下來我們在提到一個，這一個比較特別，你看英文是 focus 有關注、焦點的意思，功能是選擇表單元素的但是這樣說太模糊了，我們要以操作者瀏覽者來解說，就是瀏覽者操作滑鼠 ( 光標 ) 我就把它選出來，這樣理解了吧，如果不太好理解我把這功能的中點給提取出來如下表示。

  • 功能是選擇標單元素，也就是 <input> 表單控件標籤
  • 觸發動作是瀏覽者滑鼠 ( 光標 )
  • 光標在哪裡，就選取到哪裡

我們來實際操作看看，我們寫一個 HTML 結構骨架，裡面寫好表單控件 <input> 元素標籤，如下表示。

<body>
	<input type="text">
	<input type="text">

</body>

創建好 HTML 結構骨架後，我們再來試試看寫入 :focus 的偽類選擇器來看看呈現的效果到底是如何，真的是我光標選入表單控件 <input> 元素標籤，就能改變當前的背景顏色嘛??

input:focus {
	backgrand-color: yellow;

}

答案是可以的，最大的特色是 :focus 的偽類選擇器主要是用在表單唷! 是不是有時候需要讓用戶填寫表單時，怕突然找不到自己光標是定位在哪裡，如果有使用 :focus 的偽類選擇器的話，會因為用戶的光標位置選擇表單控件而改變了當前的背景顏色，用戶就不怕找不到光標啦! 是不是又更能提升用戶的體驗呢!

CSS複合選擇器總結

CSS複合選擇器總結

經過我們前面學到了那麼多種選擇器，不知道你有沒有頭暈了呢! 哈哈希望沒有，不過學完是學完還要看你有沒有實際自己去都用用看 try try 看，並思考為什麼要這樣使用? 為什麼要用在這個場景，如果這樣寫是不是可以省下更多 CSS 屬性代碼的量，沒錯! 只要你有這樣去思考，當初開發者為什麼要額外在創建一個用法或是寫法。

選擇器名稱功能作用使用頻率最大特色隔開符號和用法
後代選擇器用在選擇後代元素多族譜的最後一個會被選中符號是空格
子代選擇器只選擇最近一級元素少只能選擇親兒子符號是大於
並集選擇器選擇相同級的元素多能夠選取大量標籤符號是逗號
鏈結偽類選擇器選擇不同狀態的鏈結多跟鏈結相關最常用a{}和a:hover 實際開發的寫法
:focus選擇器選擇當前光標的表單少跟表單相關最常用input:focus

你就能更貼近他的用意囉! 一定是有所需求，同樣能達成目的但是如果你使用這樣操作用法就能更快的完成 CSS 屬性配置，畢竟一開始小網站沒啥東西內容少是沒錯啦! 不太需要考慮到這些，但是你日後網站一定越來越多功能也結構越來越複雜，當然你就不能再用以前什麼土法煉鋼硬扛過去，那種方法對後期都是無效的沒有人會那麼做的。

所以有新的功能和更便捷的應用都需要學會，多多練習不斷的內化自己，才會越來越厲害也會越來有假值唷! 學完這本章你會怎麼把這些CSS複合選擇器應用在你的網站呢? 以及你會怎麼優化之前的代碼 呢? 我相信你應該有頭緒了!!!

點我瞭解 小青如何每月多賺5位數台幣

能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響