# HTML(4/10) Day 7 五倍紅寶石(第八屆共筆)(2021/7/06) ## 偽類選取器： 以":"開頭。 ### 我要選誰系列： - :nth-child(x) ： 用來選取第x個物件，x可以是數字、odd或even。 - :nth-of-type() ： 會先**分類**再選取指定的物件。 - :first(last)-child：選第一(最後一個)。 - :first(last)-of-type：會先**分類**再選各類的第一(最後一個)。 an + b => a個裡面的第b個，可以寫在()內。(n=0~無限) ex. ```=html .box p:nth-child(3n+1) ``` => 我要選取到box裡下一層，第1,4,7...且標籤為p的物件，若為其他標籤則選不到。 --- ## 偽元素選取器： 以"::"開頭。 無中生有生出一個東西出來，一定要搭配content使用，不然生不出來， 生出來的東西預設為inline。 常用::before(after)來生出用來**裝飾**的東西，因為本身不具意義。 ex. 五倍官網字底下的紅線或三角形。 ### 三角形作法： ```=html .flag::after { content: ""; display: block; width: 0; height: 0; border-right: 25px solid #000; border-left: 25px solid #000; /* border-top: 25px solid #000; */ border-bottom: 15px solid transparent; } ``` --- ## 圖片： 狀況題：並排時遇到文字太多，因而超出圖片，導致圖片無法呈現滿版該怎辦? A:使用object-fit:cover，搭配width,height:100%使用，可以讓圖片放大又不會變形 background-position:%，代表圖片%對齊容器% e.g. background-position:25% => 用圖片位置25%處去對齊容器位置25%處。 --- ## 手工打造三角形： ### 原理： 利用border相接會有線條的原理來打造，border之間的交接處會產生斜線，藉此來呈現三角形的樣子 ### 使用時機： 可用在任何你想呈現尖角的地方，常用在箭頭、對話框、收藏、打折等地方， ~~就連城之內的下巴都可以手工打造出來呢，真棒!~~ ### 基本作法： ```=html .box { width: 0; height: 0; /* border-top: 20px solid #000; */ border-right: 20px solid transparent; border-bottom: 20px solid #0f0; border-left: 20px solid transparent; } ``` --- ## 自訂屬性： 子層可以使用父層自訂過的屬性，但父層不能使用子層的。 ### 用法： ``` --名字:值 屬性:var(--名字) = 變數函式 = --名字的值 ``` ### 使用時機： 有很多重複值的時候，方便一次大量修改。 可搭配:root使用，在:root設定自訂屬性後，html內的東西都可以使用這個自訂屬性。 :root ：根目錄，等同於<html></html>內。 --- ### Xmind： [CSS指令](https://www.xmind.net/m/wvB695) [選取器](https://www.xmind.net/m/zsYwsp) --- ###### tags: `HTML` `CSS`