CSS 基礎 Part1：Selector
一、選我選我選我選我：CSS selector
CSS 負責網頁樣式，全名為 Cascading Style Sheets (階層式樣式表)，用了之後就可以改變網頁樣式。
改變網頁方式的三種方法
(法一) 直接寫在元素上 : 缺點，因為 html 與 css 混著寫，故不容易維護
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
</head>
<body>
<div style="background:red;">
hello
</div>
</body>
</html>
(法二) 直接寫在頁面上，用 style 的標籤符號 : 於 head 加<style></style>標籤，再於 style 標籤中加上 css 程式碼。當規則變多時，法二也會不易維護。
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<style>
div {
background: purple;
}
</style>
</head>
<body>
<div>
hello
</div>
</body>
</html>
(法三) 獨立到一個的檔案，再用 link 將檔案引入 : 將 css 移到一個新的檔案，用 link，裡面會有一個 rel 的屬性，rel 為 relationship 的簡寫，它的關係是 stylesheet，後面用 href 接 css 的位置。如果存在同個資料夾底下，可以用./。法三的好處是 html、css 兩邊皆為獨立檔案，彼此不會互相干擾，想修內容就修內容，想修樣式就修樣式，故也是最多人使用的方式。
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<link rel='stylesheet' href='./style.css'>
</head>
<body>
<div>
hello
</div>
</body>
</html>
div {
background: green;
}
二、CSS Selector：我全部都要
Universal selectors 會選到所有的東西。可以用 * 宣告所有的 html 元素。
* {
color: red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<link rel='stylesheet' href='./style.css'>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>
<span>span3</span>
</div>
<span>span4</span>
</body>
</html>
所以，我們要如何才可以正確地選到我們想選的元素 ?
三、CSS Selector：標籤
以標籤名稱選取元素。標籤 selector 會選到所有的標籤。
div {
background: white
}
body{
background: purple
}
span{
color:yellow;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<link rel='stylesheet' href='./style.css'>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>
<span>span3</span>
</div>
<span>span4</span>
</body>
</html>
四、CSS Selector：id 與 class
實際開發，標籤 selector 並不是那麼常使用，因為我想調整的往往只有某一兩個元素，這種時候我們會使用 id 與 class ，這兩個 selector 也是實際開發上最常使用的。
重點 : 一個元素只能有 1 個 id ，但各個元素可以共享 class，也就是可以有多個 class。另外，你也可以不要有 id 或 class。
id selector
整個網頁上只會有 1 個 id，用 # 去選取，井字號表 id
class selector
id 只能有一個，但 class 可以有很多個。用 . 去選取
#div1 {
background: gray;
}
.bg-yellow{
background: yellow;
}
.text-red{
color:red;
}
body{
background: purple;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<link rel='stylesheet' href='./style.css'>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div id='div1'>
<span>hello</span>
</div>
<div class='bg-yellow'>
<span>baby</span>
</div>
<div class='bg-yellow text-red'>
<span>i love you</span>
</div>
</body>
</html>
五、CSS Selector：同時符合
要怎麼選同時符合條件者，用 . 把東西接在一起寫，表示你要同時符合這幾個條件。
div.bg-yellow.bg-real-yellow {
background: yellow;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<link rel='stylesheet' href='./style.css'>
</head>
<body>
<div class='bg-yellow bg-real-yellow'>
hello1
</div>
<div>
hello2
</div>
<span class='bg-yellow'>
hello3
</span>
</body>
</html>
六、CSS Selector：底下的元素
css 是有階層的，在這樣的狀況下，我們要如何選到底下的元素 ?
右鍵 => 檢查 => devtool 檢視層層疊疊狀況
<!DOCTYPE HTML>
<html>
<head>
<meta charset='uft-8'/>
<title> 練習 css </title>
<link rel='stylesheet' href='./style.css'>
</head>
<body>
<div class="lv1" > lv1
<div> lv2
<div> lv3
</div>
</div>
</div>
</body>
</html>
狀況一(.lv1)、會發現全部都變成紅色，因為 lv1 是包住裡面的東西。
.lv1 {
background: red;
}
狀況二(選它的下一層)、用 > 就會選到 lv2 ，如果想選到第三層就再一個箭頭。
.lv1 > div > div {
background: red;
}
狀況三(選全部) : lv1 底下所有的 div
.lv1 div {
background: red;
}
結論 : . 底下所有全部，不管你在第幾層都一樣； > 下一層的意思。
七 、CSS Selector：~ 與 +
有四個 div 都在同一層。其中一、三、四有 bg-red 的 class。
由上到下、若同個層級則由左到右。x + y 表示 x 旁邊那一個元素，如果它是 y 則對 y 進行操作；x ~ y 表示 x 旁邊的所有是 y 的元素 ；注意上述前提須為同一層，+ 表示旁邊。
實際用途 : list 會有間距，通常會希望第一個前面不要有間距，然後每個元素之間都有間距。想要的規則是 : 非第一個元素往左邊的間距。
範例一
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>i am title</title>
<link rel='stylesheet' href='./style.css'/>
</head>
<body>
<div class='bg-red'>div1</div>
<div>div2</div>
<div class='bg-red'>div3</div>
<div class='bg-red'>div4</div>
<div>123</div>
<span>456</span>
<span>333</span>
</body>
</html>
.bg-red + .bg-red {
background: red
}
div + span {
background: blue
}
.bg-red ~ .bg-red {
background: red
}
div ~ span {
background: blue
}
範例二
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>i am title</title>
<link rel='stylesheet' href='./style.css'/>
</head>
<body>
<span class='bg-red'>span1</span>
<span class='bg-red'>span2</span>
<span class='bg-red'>span3</span>
<span class='bg-red'>span4</span>
</body>
</html>
.bg-red ~ .bg-red{
margin-left: 20px
}
不在同一層，選不到
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>i am title</title>
<link rel='stylesheet' href='./style.css'/>
</head>
<body>
<span class='bg-red'>span1</span>
<span>span2</span>
<div><span class='bg-red'>span3</span></div>
<span>span4</span>
</body>
</html>
.bg-red ~ .bg-red{
background: red
}
八 、CSS Selector：Pseudo-classes，以 hover 為例
參考資料
滑鼠移動上去的動作，就是 hover
span:hover{
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>i am title</title>
<link rel='stylesheet' href='./style.css'/>
</head>
<body>
<span class='bg-red'>span1</span>
<span>span2</span>
<div><span class='bg-red'>span3</span></div>
<span>span4</span>
</body>
</html>
要滑鼠移動上去才能檢視效果，所以可以如何優化除蟲？ A：藉由 force element state。
可以在 dev-tool => elements => :hov => 打勾 hover 進行檢視。可以在滑鼠沒移動上去時，也檢視其效果。
九 、CSS Selector：Pseudo-classes，以 nth-child 為例
用途 : 幫你選到第幾個元素。
它是先看第幾個元素，再去判斷有無符合前面條件。先看順序再看標籤。也就是要先是第 n 個元素，然後符合前面條件，才會顯示你寫的邏輯。
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="wrapper">
<div>row1 </div>
<div>row2</div>
<div>row3</div>
<div>row4</div>
<div>row5</div>
</div>
</body>
</html>
複習：想選到下面所有的 div
.wrapper div {
background: red
}
想選第一個 div、最後一個 div
.wrapper div:first-child {
background: red
}
.wrapper div:last-child {
background: red
}
想選第 n 個 child
.wrapper div:nth-child(1) {
background: red
}
想選奇數、偶數
.wrapper div:nth-child(odd) {
background: red
}
.wrapper div:nth-child(even) {
background: red
}
想選的數字可以 n 進行運算， n=0 開始
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="wrapper">
<div>row1</div>
<div>row2</div>
<div>row3</div>
<div>row4</div>
<div>row5</div>
<div>row6</div>
<div>row7</div>
<div>row8</div>
<div>row9</div>
<div>row10</div>
</div>
</body>
</html>
.wrapper div:nth-child(3n) {
background: red
}
.wrapper div:nth-child(3n-1) {
background: red
}
.wrapper div:nth-child(2n+1) {
background: red
}
想選 wrap 底下第 2 個 bg-red ，發現選不到 QAQ 原因是這 selector 是從後面看回來，和直觀地想不一樣。
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="wrapper">
<div class="bg-red">row1 </div>
<div>row2</div>
<div class="bg-red">row3</div>
<div>row4</div>
<div>row5</div>
</div>
</body>
</html>
.wrapper .bg-red:nth-child(2) {
background: red
}
原因是它是以順序為準，它是先看第二個元素，再看是不是 .bg-red。
(也就是：我要選 .wrapper 底下第二個元素，如果它是 bg-red 就執行邏輯判斷。)
所以如果將原本的 html 這樣修改，它就選的到 => row2
<body>
<div class="wrapper">
<div class="bg-red">row1 </div>
<div class="bg-red">row2</div>
<div class="bg-red">row3</div>
<div>row4</div>
<div>row5</div>
</div>
</body>
或是不動 html 僅修改 css => 選到 row3
.wrapper .bg-red:nth-child(3) {
background: red
}
標籤也是相同的概念。
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="wrapper">
<span>row1</span>
<div>row2</div>
<div>row3</div>
<div>row4</div>
<div>row5</div>
</div>
</body>
</html>
發現甚麼都沒選到，因為它是看 .wrapper 底下第一個元素是不是 div，但第一個元素是 span。
.wrapper div:nth-child(1) {
background: red
}
所以 nth-child() 參數要寫 2，才會拿到又是第二個元素，且又是 div 的東西。
.wrapper div:nth-child(2) {
background: red
}
十 、CSS Selector：Pseudo-element，before 與 after
偽元素看起來很像 html 生出來的，但事實上它是靠 css 產生出來，所以叫偽元素。好處是只要在 css 加，不用在 html 加，當 html 元素太多或不必要，可以用 css 進行取代，還可以讓寫法更簡潔與好閱讀。
前言：Pseudo-classes 可以選擇在某個狀態底下的樣子；Pseudo-element(偽元素)可以選到那個元素的某個部分。主要會聚焦在 before 與 after 。
偽元素列表
為了區別 Pseudo-element 與 Pseudo-classes，通常 Pseudo-element 會用兩個冒號表示。
第一個屬性：content
content 是它裡面要裝的內容。所以我可以不靠 html 標籤憑空生一個內容出來。content 一定要有東西，如果沒有 content 對它做甚麼都沒有用
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="wrapper">
200
</div>
</body>
</html>
.wrapper::before {
content: "$";
color: red;
}
.wrapper::after {
content: "NTD";
color: red;
}
content:attr() attr 是 attribute 的縮寫，()放 html 的屬性，會將屬性的值取出變成內容
我要抓出 class 這個屬性的內容 => 200 price
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="price">
200
</div>
</body>
</html>
.price::after {
content:attr(class);
}
在 html 要自訂一些元素，通常會用 data 開頭。
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="song" data-message='愛你一萬年'>
點播一首
</div>
<div class="song" data-message='九十九朵玫瑰花'>
點播一首
</div>
</body>
</html>
.price::after {
content:attr(data-message);
color:red;
}
對 before 、 after 來說 content 通常會有東西，如果沒有也要設成空 " "，不然會出現錯誤，對它做甚麼都沒有用。
.song::after {
content:"";
color:red;
}
十一 、CSS Selector：權重計算方式
假設有多條不同的 css 規則套用到同一個元素，則誰為優先 ?
範例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="wrapper">
<div class="list">
<div id="pickme" class="item">
pick me
</div>
</div>
</div>
</body>
</html>
css 某些屬性是來自繼承，所以它的 color = red 會繼承它的 parent
.wrapper {
color:red;
}
也可以直接對 class 寫規則。從 devtool => elements styles 發現， .wrapper 的規則被畫掉了。顏色變成藍色。
.wrapper {
color:red;
}
.item {
color:blue;
}
如果 class 寫兩次，規則會以後者優先，也就是如果兩個層級相同，會以後者為優先。顏色變為綠色。
.wrapper {
color:red;
}
.item {
color:blue;
}
.item {
color:green;
}
我也可以直接對 id 下規則。顏色變成粉紅色。
.wrapper {
color:red;
}
.item {
color:blue;
}
.item {
color:green;
}
#pickme{
color:pink;
}
想選取元素，又不想用 id 也可以用 class + > 去寫規則。可是顏色沒變 ? 所以這些規則的大原則是甚麼 ?
.wrapper {
color:red;
}
.item {
color:blue;
}
.item {
color:green;
}
div.wrapper > div.list > div.item {
color:orange;
}
#pickme{
color:pink;
}
掌握大原則 id > class > 標籤。也就是越詳細的贏。
說明 : 整個 html 元素只有一個 id 、有很多個 class、標籤又比 class 多。
參考閱讀一
參考閱讀二
比較公式 :
(1) 呈現粉色
// 0, 1, 0
.item {
color:green;
}
// 0, 3, 3
div.wrapper > div.list > div.item {
color:orange;
}
// 1, 0, 0
#pickme{
color:pink;
}
(2) 呈現綠色
.wrapper {
color:red;
}
.wrapper .list .item {
color:green;
}
div.wrapper > div.list {
color:orange;
}
以上都敵不過 inline style。它的權重 1, 0, 0, 0。
<body>
<div class="wrapper">
<div class="list">
<div id="pickme" class="item" style="color: orange;">
pick me
</div>
</div>
</div>
</body>
終極奧義 : !important，它的權重 1, 0, 0, 0, 0，可以蓋掉所有規則。實際開發，不要用 !important，不應該把其它規則蓋掉。除非真的沒有招。因為會讓後續維運設定其它樣式更為困難。
(3) 呈現藍色
我們還是按照順序比較。
div.wrapper > div.list > div.item{
color:blue !important;
}
div.wrapper div.list .item {
color:green !important;
}
#pickme{
color:pink;
}
結論 : 按照順序比下來
!important, inline style, id, class/attribute, tag/element
(沒有進位問題~誰大誰就贏)
![[Python] Multi-Process vs Multi-Thread](https://jerryeml.coderbridge.io/2021/03/08/jy-python-notes/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=菜雞的煞氣筆記ˊˇˋ_[Python] Multi-Process vs Multi-Thread_@jerryeml_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)
