---
# System prepended metadata

title: '2-1、 CSS 基礎 1 : CSS selector'
tags: [FE101, Lidemy心得, HTML+CSS, 進度筆記, 2020八月第三周]

---

# 2-1、 CSS 基礎 1 : CSS selector 
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## CSS (Cascading Style Shets) 階層式樣式表
- 負責網頁樣式，用到頻率比 HTML 來得高。  

__基本款三種樣式__

```
<!DOCTYPE HTML> 

<html>
  <head>
  網頁資訊。
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
    <style>
         div {
               background:black;
    }
    </style>
  </head>
  <body>
    <div style="background:silver;">
    網頁主要呈現內容。  
    </div>
    <!-- 
        註解 
        不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。  
    -->
  </body>
</html>
```

---
1. ``<div style="background:silver;"></div>`` :  常見顏色有支援，不過不是所有顏色支援，而且不好維護。  

2. ``<style></style>`` :  規則為 `selector {attribute: value;}` 可以選到屬性上顏色。   

3. CSS 規則變多了後難維護，而移到另外一個獨立檔案: `<link rel="stylesheet" href="./style.css" />` ， 而 ``./style.css`` 則會連到檔案位置:  
- 連到檔案位置內的寫法: `div {background: gray}` 。 
- HTML 和 CSS 檔案都獨立比較好維護，因此蠻常用這方法。   

---
# 2-2、 CSS 基礎 1 : Selector 我全都要 !
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## CSS Selector - Universal Selectors

__選到所有東西__   

開啟一個檔案 存成 HTML 格式:

```
<!DOCTYPE HTML> 

<html>
  <head>
  網頁資訊。
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
  <span>span1</span>
  <span>span2</span>
    <div>
    <span>span3 網頁主要呈現內容。</span>
    </div>
    <span>span4</span>
    <!-- 
        註解 
        不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。  
    -->
  </body>
</html>
```

接著另外開一個檔案 style.css 格式:
```
* {
      color: red;
}
```

所有文字都會套用這個規則。

---
# 2-3、 CSS 基礎 1 : Selector 上印記 !
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## 如何去選我所要的元素 ?
- 以標籤為名稱，如: div 、 body 

開一個檔案 style.css 格式:
```
div {
      background: orange;
}

body {
      background: yellow;
}
    <!-- 
        註解 :
        去掉星號改成 div 、 body 。  
    -->
```
  [- 如果選 div 就會選到所有 div 的標籤。](https://drive.google.com/file/d/1x9laU2Bkt99xS14nmE-X4Z8SjtYKWWiE/view?usp=sharing)
- 實際開發上可能比較少用，可能選的時候只有某一、二個元素要調整。  

---

# 2-4、 CSS 基礎 1 : Selector 分門別類 !
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## id 與 class
- 較常用的兩個 Selector 。  

存成一個 html 格式的檔案:
```
<!DOCTYPE HTML> 

<html>
  <head>
  網頁資訊。
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="div1">
          Hi
    </div>
    <div class="bg-yellow text-white">
          Hello
    </div>
   <div>
          是在 Hello ?
    </div>
    <div class="bg-yellow">
          是在 Yellow ?
    </div>
    <!-- 
        註解 
        不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。  
    -->
  </body>
</html>
```

說明:  
`<div id="div1">Hi</div>` 整個網頁上只會有一個 id ， id 只能用一個。 
一個元素可以有多個 class ， 而且 class 可以被共享，也能對字體調整顏色:  ``<div class="bg-yellow text-white">Hello</div>`` 。  

---

一樣開一個檔案 style.css 格式:
```
#div1 {
      background: orange;
}

.bg-yellow {
       background: yellow;
}

.text-white {
       color: silver;
}

body {
      background: black;
}
    <!-- 
        註解 :
        無。  
    -->
```    
說明:  
- `#div1 {background: orange;}` 表示 id 的名稱。  

- ``.bg-yellow {background: yellow;}`` 套了 Selector class 後整條背景都套黃色。  

- ``.text-white {color: silver;}``  class 也可以針對字體換顏色。  

---

![](https://i.imgur.com/skRAuI4.png)

---

# 2-5、 CSS 基礎 1 : 如何選同時符合的條件
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

延續 2-4 class ， 如果只要 `div class="bg-yellow"` 有顏色，而 span 不顯色:  
```
  <body>
    <div class="bg-yellow bg-real-yellow">
          Hi
    </div>
    <div class="bg-yellow">
          Hello
    </div>
   <div>
          是在 Hello ?
    </div>
    <span class="bg-yellow">
          是在 Yellow ?
    </span>
    <!-- 
        註解 
        不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。  
    -->
  </body>

```

---

則在檔案 style.css 格式中更改:
```
div.bg-yellow {
       background: yellow;
}

.text-white {
       color: silver;
}

body {
      background: black;
}
    <!-- 
        註解 :
        無。  
    -->
```    
說明:  
- 這樣改就只有 Hi 跟 Hello 有顏色。  

![](https://i.imgur.com/7RYnSZI.png)  

- class 可以一直連接，如 `div.bg-yellow.bg-real-yellow {background: yellow;}` ， 這樣就只會顯示 Hi 有顏色。  

![](https://i.imgur.com/f448ZZD.png)  

---

# 2-6、 CSS 基礎 1 : 只要底下的元素
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

先照一層一層排列的順序，有三層:  

<!DOCTYPE HTML> 

<html>
  <head>
  網頁資訊。
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="Lv1">Lv1
         <div class="bg-red">Lv2
               <div class="bg-red">Lv3</div>
         </div>
    </div>
    <!-- 
        註解 
        不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。  
    -->
  </body>
</html>

---

則在檔案 style.css 格式中更改:
```
.Lv1 > div {
       background: orange;
}

    <!-- 
        註解 :
        無。  
    -->
```    

說明:
- 會選到除了 Lv1 那層的其他層，並轉換顏色，因為 Lv1 的 div 區塊包了 Lv2 和 Lv3 。  

![](https://i.imgur.com/z3EKvIN.png)

- 如果要選 Lv3 就可以: `.Lv1 > div > div {background: orange;}` 。  
- 同一層和包含在內的 div 都會受這個效果影響。  
- 如果要選 Lv1 底下所有 div : `.Lv1 div {background: orange;}` 。  
- 如果 Lv1 下層沒有指定的標籤就不會被效果影響，例如 Lv1 > .bg-red ， 但 Lv2 沒有 class="bg-red" 標籤。  
- `.Lv1 > .bg-red {background: orange;}` 會除了 Lv1 以外，下層有 class="bg-red" 受影響。  
- `.Lv1  .bg-red {background: orange;}` 中間空白，會除了 Lv1 以外，底下所有 class="bg-red" 受影響。  

![](https://i.imgur.com/epCbePP.png)

---

# 2-7、 CSS 基礎 1 : 選旁邊的元素
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## 旁邊的元素: + 和 ~  
四個 div 都在同一層:  
```
<!DOCTYPE HTML> 

<html>
  <head>
  網頁資訊。
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <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>
```
---

則在檔案 style.css 格式中更改:
```
.bg-red + .bg-red {
       background: orange;
}

div + span {
       background: blue;
}

    <!-- 
        註解 :
        無。  
    -->
```    
- ``+`` 在同一層，上下的關係才會有作用， 如果有兩個 span 選不到最後一個 span ， 只會選到一個元素。  

- 用 ``+``  ， 如果標籤只有一個，則會自動找鄰近的有兩個以上的標籤作用。  

- 用 `+` 選 .bg-red 旁邊的 .bg-red ， 會顯示最下層的顏色:  

 ![](https://i.imgur.com/sWmrBDQ.png)  
 
 - 用 `+` 選 div 旁邊的  span ， 會顯示最下層的藍色:  

![](https://i.imgur.com/LPLZGpb.png)  

- 用 `+`  `<span>333</span>` 因為旁邊沒有 div 因此不會被選到。

## `~` 的用法
```
<!DOCTYPE HTML> 

<html>
  <head>
  網頁資訊。
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <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>
```
---

則在檔案 style.css 格式中更改:
```
.bg-red ~ .bg-red {
       background: orange;
}

div ~ span {
       background: blue;
}

    <!-- 
        註解 :
        無。  
    -->
```    
- "~" 在同一層，上下的關係才會有作用，但是會選到所有同標籤的元素。

- 如果將 `span + div {background: blue;}` 刪掉換成 ， `div ~ span {background: gray;}` 則是 div 右邊所有的 span 都會被上色。   

- 如果將 `.bg-red ~ .bg-red {background: orange;}` 則是 div1 後面所有的 div3 和 div4 都會被上色。  

---

## 如果有個 list ， 要有邊距，就可以用到這個效果:
```
<!DOCTYPE HTML> 

<html>
  <head>
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <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>
```
---

則在檔案 style.css 格式中更改:

```
.bg-red + .bg-red {
       background: orange;
       margin-left: 20px;
}
    <!-- 
        註解 :
        無。  
    -->
```    

![](https://i.imgur.com/ivyoBSg.png)  

- 這樣就會造成一個清單，邊距有 20 px 。  

- ``.bg-red ~ .bg-red {background: orange;margin-left: 20px;}`` 東西都在一起的話也可以這樣。  

---

# 2-8、 CSS 基礎 1 : 假的 class ?!
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## Pseudo-Classes : hover

滑鼠移上去蓋在字(元素)上面就是 hover 。  

可以用 2-7 的 html 。  
以 style.css 為例:
```
span:hover {
       background: blue;
       margin-left: 20px;
}
```
  
  ![](https://i.imgur.com/LVN6arR.png)
  
  debug 的時候也可以用 dev tool (以 Firefox) :  
  ![](https://i.imgur.com/uhcllUr.png)

- 開啟 horver 和 focus horver within 。  
- 在滑鼠沒有移上去的狀態下就啟用 horver 。  
- 這很常用 ! 。  
  
  ---
  
  參考資料:
  
  https://www.codegrepper.com/code-examples/csharp/pseudoclasses+CSS
  
  https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
  
---

# 2-9、 CSS 基礎 1 : 選第五元素
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## nth-child 可以幫助選到第幾個元素

__5 個 row 的 html 格式:__  

<!DOCTYPE HTML> 

<html>
  <head>
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <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>

---
```
.wrapper div:first-child {
       background: orange;
       
}

.wrapper div:nth-child(3) {
       background: orange;
       
}

.wrapper div:last-child {
       background: orange;
       
}
```

- ``.wrapper div:nth-child() {background: orange;}`` nth-child() 括號內可以填 odd 、 even 。  
- ``.wrapper div:nth-child() {background: orange;}`` nth-child() 括號內填 3n ， 就會以 0、3、6、9... 順序找下去 。  
- ``.wrapper div:nth-child() {background: orange;}`` nth-child() 括號內填 3n+1 ， 就會以 1、4、7... 順序找下去 。  

- 如果在 body 內這樣寫:  
```
 <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>
```
- 然後用 ``.wrapper .bg-red:nth-child(2) {background: orange;}`` 會發現甚麼也選不到。  
- 他是先以順序 nth-child(2) 第 2 個元素為準，然後再看第 2 個元素是不是 .bg-red ， 因此第2個元素是 row2 。  
- 一般用不會這麼複雜，一般都是連續的標籤和 class 會用到; 使用上是先看順序再看標籤。  

---

---

# 2-10、 CSS 基礎 1 : 偽元素
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  

## pseudo-element 偽元素

- 可選到元素的某些部份。  
- before
- after

---

```
<!DOCTYPE HTML> 

<html>
  <head>
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
        <div class="wrapper">
                  Hello
        </div>
        <div class="price">
                 1000
        </div>
    <!-- 
        註解 
        不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。  
    -->
  </body>
</html>
```

---

以 style.css 為例:
```
.wrapper::before {
        content: "123";
        color: silver;
}

.price::before {
        content: "$";
        color: orange;
}
```

- 看起來很像 html 的元素，但是用 CSS 產生的，會直接產生一個內容 123。  
- 好處是不用在網頁 body 內直接加符號，可以在 CSS 檔案中做更動，甚至加入圖片...等。  
- 例如  ``<div class="price">`` 用了 `::befor` 就會讓 $ 符號在價錢前面的效果。  

![](https://i.imgur.com/bveUw6r.png)  

  - ``<div class="price">`` 用了 `::after` 就會讓 $ 符號有在價錢後面的效果。  

![](https://i.imgur.com/PrufVzY.png)  

- 如果網頁 HTML 元素太多或不必要，就可以用 before(前面) 、  after(後面) 偽元素來取代。  

## content 還能放東西

- content 內一定要有東西，通常都跟 before 、 after 來一起使用。  

---

以 style.css 為例:
```
.price::after {
        content: attr();
        color: orange;
}
```

- attr() 括號內可以放 html 元素， 像是 `<div class="price">` ，CSS 檔案內 `content: attr(class)` ; 就可以把 class 的文字抽出。  

![](https://i.imgur.com/dvynrbM.png)

-  html 內自訂元素或是 attr() ， 會以 `<div class="price" data-id="Yooooooo">` ， CSS 檔案內 `content: attr(data-id)` ; 就可以把 Yooooooo 抽出。  

- 這樣會比用 ``<span class="symbol">NTD</span>`` 包起來，然後內標顏色打一長串來的簡潔。  

---
參考資料:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

---

# 2-11、 CSS 基礎 1 : 一招大招就能搞定的，就不需要一堆小招
###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20  
---

以這個 html 格式為例:
```
<!DOCTYPE HTML> 

<html>
  <head>
    <title>網頁標題</title>
    <meta charset="utf-8" /> 
   <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>
```

## 可以用 dev tool 看那些規則被蓋掉

- id (只有一個) 的權重 > class (很多個) > 標籤 (數不清個)，越清楚程度的贏，不論有多少個 class 都一樣。  

- CSS 的某些屬性會繼承，例如 color 。  

- 優先順序一樣的話 ， class 會以後面的為準，例如有兩個或是不同的 class ， 然後再 CSS 檔案內這樣寫 `` .item {color: blue;}`` 和 ``.item {color: orange;}`` ， 最後面的 class (橘色) 會蓋掉前一個。  

- CSS 檔案內如果寫 `div.wrapper > div.list > div.item {color:yellow;}` ， 這樣非常的詳細，但還是贏不了 id 。  

- id 如 ， ``#pickme {color: pink;}`` 會蓋掉所有的顏色，不論後來多少 class 寫到。  

## Selector 權重計算方式

按照順序會照位數比，如:  

```
             class
id >   pseudo class   >   element
             attribute
0,             0,                  0

```
                             1, 0, 0                                                                       0, 3, 0                             
- id 如 ， ``#pickme {color: pink;}``  就會比 ``div.wrapper > div.list > div.item {color:yellow;}`` 大。  
- 但都打不贏 inline style (1,0,0,0) ， 如 html 內 `<div id="pickme" class="item" style="color: orange">` ， 權重就 > id 。  
- 最終魔王: !important (1,0,0,0,0) ， 更比 inline style 和 id 猛; 用法是在 CSS 檔案內 `.wrapper {color: red !important;}` 。  
  - 第一順位的 !important 比之後的 ! important 都來得重要且優先。  
  - 而放在 id 內的 !important 又比放在其他地方的 !important 權重都來得重。  
  - 實際開發時會很少用 !important ， 因為會蓋掉一堆規則，也會很少用 inline style 。  

---

參考資料:

[強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)](http://muki.tw/tech/css-specificity-document/)


[你對 CSS 權重真的足夠了解嗎？](https://juejin.im/post/5afa98bf51882542c832e5ec)
