[ CSS 01 ] Selector


Posted by tzutzu858 on 2020-07-26

Cascading Style Sheets 階層式樣式表
三種方式改變樣式

第一種 <div style = "background:red;"> 這種很難維護,因為跟 CSS 混在一起


第二種 加在 head 裡面

<head>
  <style>
     div {
        background: red;
     }
  </style>
</head>

第三種 最好維護,新開一個 CSS 的檔案

   div {
        background: red;
     }

html 檔案放在 head 裡面 <link rel = "stylesheet" href="./style.css">


Selector 我全部都要

  • Universal selectors
    星號,所有元素都會變紅色
* {
  coler: red; 
}
  • 標籤
    所有 div 背景都會是紅色,body 整個都是綠色
div {
    background: red;
}
body{
    background: green;
}
  • id 和 class
    # 代表 id 的意思,後面接 id 名稱,整份只能有一個 id
    . 代表 class 的意思,後面接 class 名稱 ,class 可以共享,一個元素也可以設定不只一個 class
// css 檔案
# idName {
    background: red;
}
.bg-yellow {
   background: yellow
}

.text-white {
   color: white
}
// html 檔案
<div id = "idName">
   hello
</div>

<div class = "bg-yellow">
   hello2
</div>

<div class = "bg-yellow" text-white>
   hello3
</div>
  • 同時符合
    例如 : 需要同時是 div ,class 是 bg-yellow 才顯現背景黃色
// css 檔案

div.bg-yellow {
   background: yellow
}
// html 檔案
<div class = "bg-yellow">
   hello2   // 只有這個會顯示背景黃色
</div>

<span class = "bg-yellow" text-white>
   hello3
</span>
// css 檔案

.bg-yellow.bg-real-yellow {
   background: yellow
}
// html 檔案
<div class = "bg-yellow">
   hello2   
</div>

<span class = "bg-yellow bg-real-yellow"> 
   hello3   // 只有這個會顯示背景黃色
</span>
  • 底下元素
// css 檔案
.lv1 > div {  // 只要是 lv1 下一層的 div 都會被選到,如果沒有 > 符號,是空白則是指.lv1 底下所有的 div 都會被選到
   background: red
}
// html 檔案
<div class="lv1">lv1
   <div>lv2  // 會被選到
       <div>lv3</div>
   </div>
   <div>lv4  // 會被選到
   </div>
</div>
  • 旁邊的元素 + 和 ~ (同一層才有用)
// css 檔案
.bg-red + .bg-red {  // 旁邊也是.bg-red 的 .bg-red 才會顯示紅色
   background: red
}
// html 檔案
<div class="bg-red">div1</div>
<div>div2</div>
<div class="bg-red">div3</div>
<div class="bg-red">div4</div>  // 只有它會顯示紅色
// css 檔案
.bg-red ~ .bg-red  {  // bg-red 旁邊所有的 bg-red 都會顯示紅色
   background: red
}
// html 檔案
<div class="bg-red">div1</div>
<div>div2</div>
<div class="bg-red">div3</div>   // 顯示紅色
<div class="bg-red">div4</div>  // 顯示紅色
span:hover {
  background: red  // 所有 span 滑鼠移上去背景都會變紅色
}
  • nth-child
// css 檔案
.wrapper div:nth-child(3) {   // 只有第三個變紅色
   background: red
}

.wrapper div:nth-child(odd) {  // 基數都是背景變紅色
   background: red
}

.wrapper div:nth-child(3n) {  // 3的倍數都是背景變紅色
   background: red
}

.wrapper div:nth-child(3n+1) {  // 1.4.7....背景變紅色
   background: red
}
  • pseudo-element 偽元素
    其中兩個是 before 、 after
    before 是在前面加,after 是在後面加,一定要放 content
// css 檔案
.wrapper::before {
   content:"$";  // 在 html 那邊便不用打 $ ,用 css 產生文字
   color: red
}
// css 檔案
.price::after {
   content: attr(class)
}
// html 檔案
<div class="price">
   1000      // 顯現出來的就會是 1000 price
</div>
  • 權重計算方式
    id > class > 標籤
    物以稀為貴,整份只會有一個 id ,標籤是會一拖拉庫
    越詳細越贏

按照順序比下來,優先順序一樣的話,會以後面的為準

id class、pseudo class、sttribute tag(element)
0 0 0

但以上都敵不過 inline style
1, 0, 0, 0

奧義 : !important
1, 0, 0, 0, 0


延伸閱讀:

  1. 強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)
  2. 你對 CSS 權重真的足夠了解嗎?









Related Posts

Day 5 -教惠惠說話,以及使用 Firebase 資料庫

Day 5 -教惠惠說話,以及使用 Firebase 資料庫

Day05:從 class 看 bytecode

Day05:從 class 看 bytecode

[DAY9] 初學 Git (下)

[DAY9] 初學 Git (下)


Comments