p/om9qya

認真的F

@MajimeF

Sat, Oct 30, 2021 7:55 AM

Sat, Oct 30, 2021 3:43 PM

2021/10/30（六）
線上課程網頁開發學習進度進度紀錄 60/554。複習日。
https://www.udemy.com/...
058、grouping selector
059、descendant selector

認真的F

@MajimeF

Sat, Oct 30, 2021 8:03 AM

上一噗：

@MajimeF - 2021/10/29（五） #線上課程 #網頁開發 #學習進度 #進度紀錄 60/...

認真的F

@MajimeF

Sat, Oct 30, 2021 8:03 AM

此課程書籤噗：

@MajimeF - #書籤噗 #線上課程學習紀錄 #網頁開發

認真的F

@MajimeF

Sat, Oct 30, 2021 8:04 AM

【Grouping Selector】
多選標籤，做同樣的樣式設定。

比如 h1、h2都要是橘色。
雖然可以一一用 element selector 複製貼上指定…

老師的老師說過：「當你在對你的程式碼複製貼上時，你的程式碼就有改善的空間。」

→可以改用「grouping selector」一次設定。

認真的F

@MajimeF

Sat, Oct 30, 2021 8:07 AM

grouping selector 寫法：
在複數標籤之間加入「,（逗號）」。

h1,
h2 {
color: orange;
}

就可以讓 h1 與 h2 都變成橘色。
當然也可以再加入其他的標籤，只要再加入逗號即可。

認真的F

@MajimeF

Sat, Oct 30, 2021 3:35 PM

059、Desendant Selector
descendant 後裔

在 HTML 中，被<></>包住的就是別人的後裔。
像<body>這樣就是大家長。

認真的F

@MajimeF

Sat, Oct 30, 2021 3:36 PM

如果用<div>把連結分類…

<div class="link1">
<a href="https://developer.mozilla.org/...>MDN</a>
<a href="https://www.w3schools.com/...>W3schools</a>
</div>

<div class="link2">
<a href="./myform.html">表格1</a>
<a href="./form2.html">表格2</a>
</div>

認真的F

@MajimeF

Sat, Oct 30, 2021 3:37 PM

對<div>來說，在<div></div>裡面的都是它的小孩（descendant 後裔）
<div>是 parent 雙親。

認真的F

@MajimeF

Sat, Oct 30, 2021 3:38 PM

CSS

div.link1 a {
color: red;
}

div.link2 a {
color: aqua;
}

認真的F

@MajimeF

Sat, Oct 30, 2021 3:39 PM

這選取了 parent 、child。

必須是<div>的 link1 類別，且是<a>標籤，才會套用樣式（紅色字）。
link2 亦同。