筆記、[FE101] 前端基礎 CSS (Selector)

#css selector

Posted by s103071049 on 2021-05-20

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
(沒有進位問題~誰大誰就贏)


#css selector

s103071049




Related Posts

[Note] JS: Call Stack & Execution Context

[Note] JS: Call Stack & Execution Context

 urlun0404
[Week7] - Web Storage 物件：LocalStorage / SessionStorge

[Week7] - Web Storage 物件：LocalStorage / SessionStorge

 Kayla
金魚系列、稀飯版

金魚系列、稀飯版

 s103071049

Comments