[ CSS 01 ] Selector

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

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

第二種加在 head 裡面

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

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

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>  // 顯示紅色

Pseudo-classes : hover (以 hover 為例)
偽元素一覽表：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

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

[ CSS 01 ] Selector

tzutzu858

Related Posts

Comments

tzutzu858

Related Posts

優先性 與 相依性

簡明 Linux Shell Script 入門教學

資料傳輸物件Data Transfer Object(DTO) 簡介

Comments

優先性與相依性