# 0324 偽元素、三角形、圓角、定位、選取器 ###### tags: `HTML / CSS` ## 偽元素 - ::before & ::after 是 inline 元素 - 在『\<p>』裡，內容的前後 ```css= p{ background-color: #ccc; } p::before{ content: "before"; } p::after{ content: "after"; } /* ------------------------- */ <body> <p>偽元素</p> </body> ``` 顯示為：![](https://i.imgur.com/3mJCJDG.png =150x) - 需要搭配 “content” 才可以使用，否則不存在 - content可以搭配“空內容” - 通常用來做裝飾性的東西（沒有語意） - 使用偽元素製作三角形 ```css= p::before{ content: ""; /*空內容*/ display: inline-block; /*調整寬高使用inline-block*/ width: 0; height: 0; border-top: 8px solid transparent; border-left: 8px solid rgb(61, 61, 151); border-bottom: 8px solid transparent; vertical-align: middle; } ``` 顯示為：![](https://i.imgur.com/s4AEVFu.png =100x) --- ## 應用邊框線製成三角形 四個邊框線，中間是由斜角對接 ```css= .arrow{ width: 50px; height: 50px; border-top: 40px solid #faa; border-left: 40px solid #afa; border-right: 40px solid #aaf; border-bottom: 40px solid yellow; } ``` ![](https://i.imgur.com/euLTxl0.png =100x) - 將 div 寬高設為 0 ```css= .arrow { width: 0px; height: 0px; border-top: 40px solid #faa; border-left: 40px solid #afa; border-right: 40px solid #aaf; border-bottom: 40px solid yellow; } ``` ![](https://i.imgur.com/yt9AyLa.png =100x) - 利用邊框線特性做出三角形 - 斜邊是由兩條相連的邊框線所組成，其中一條拿掉，斜邊會(如下圖：拿掉 top 邊框線，上面的斜角就會消失，變成直角三角形） - 使用透明色達到效果 - 可使用田字格來判斷需要哪邊的邊界 ![](https://i.imgur.com/ForSQxT.png =150x150) ```css= .arrow1{ width: 0px; height: 0px; /* border-top: 40px solid transparent; */ border-left: 40px solid #faa; border-right: 40px solid #aaf; border-bottom: 40px solid #afa; } .arrow2{ width: 0px; height: 0px; border-top: 40px solid transparent; border-left: 40px solid #faa; border-right: 40px solid #aaf; border-bottom: 40px solid #afa; } ``` ![](https://i.imgur.com/IqSpFgf.png =100x) ![](https://i.imgur.com/zNxjCN7.png =100x) - arrow1拿掉border-top，比較arrow2，白色部分消失，粉色跟紫色的部分因斜角消失，只剩下一半 ```css= .arrow { width: 0px; height: 0px; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid #aaf; border-bottom: 40px solid transparent; } ``` ![](https://i.imgur.com/70AiOt8.png =80x) --- ## 定位 依據畫面中的位置做定位 - static：所有定位效果回歸於零 - ==**relative**==：相對定位 - 相對原本位置做偏移 - 依舊佔據原本的空間 - 給予上下左右值（參考原本位置），偏移顯示 - left: 自原本位置左側移動的距離 - top: 自原本位置上方移動的距離 ```css= li:nth-child(23){ background-color: tomato; position: relative; left: 50px; top: 50px; } ``` ![](https://i.imgur.com/ua33TNH.png =200x) #### 圖層的先後順序 z-index - 所有物件的 z-index 都預設為0 - z-index 數字越大層級越上面 - 後方原始碼蓋住前方原始碼 - 有定位層級的物件 > 無定位層級 - 有 z-index 的高於沒有 z-index 🍎 ***前後順序決定關係: z-index > postion > 原始碼出現先後*** ```css= li:nth-child(23){ background-color: tomato; position: relative; left: 50px; top: 50px; } li:nth-child(24){ z-index: 2; } ``` ![](https://i.imgur.com/MIiaDbP.png =200x) - ==**fixed**==: - 自己獨立一層（上浮） - 離**視窗**目前位置上方及左側多遠，就是預設距離(固定在畫面上：e.g.網頁上的選單導覽列、回到最上方之類的) - 若預設位置在視窗之外（捲軸下拉），就找不到他了 - 定位位置為視窗，所以上下左右是與視窗的距離 ```css= .box{ width: 100px; height: 100px; background-color: tomato; font-size: 50px; position: fixed; bottom:0px; left:0px; } ``` ![](https://i.imgur.com/KF58YtX.png =150x) - 由於fixed是定位視窗，須給予上下左右值才能計算margin值的分配 ```css= .box{ width: 100px; height: 100px; background-color: tomato; font-size: 50px; position: fixed; /*給予上下左右值，才能計算margin值的分配*/ bottom:0px; left:0px; top: 0px; right: 50%; margin: auto; } ``` 範例： 到畫面寬度25%的中線：畫面寬度右側50%，剩餘50%使用margin auto取得中線位置 ![](https://i.imgur.com/NKA4LJn.png) - ==**absolute**== - 自己獨立一層（上浮） - 預設在原本的位置，如本來不在視窗內依然能透過捲動看見 - 上下左右是依照**上一層**的定位： - 上一層 b 層（圖一） - 上上一 a 層(圖二) - body 層(圖三) - html 層(圖四) - 瀏覽器：*在第一個視窗內（第一個視窗畫面），可被捲走* （若上幾層都沒有定位，通常就是預設位置） ![](https://i.imgur.com/GgJMLWf.png) **＊層級：視窗-> html -> body -> a -> b** - sticky - [ ] - https://ithelp.ithome.com.tw/articles/10241079 根據 MDN 上的說明，sticky element 不會脫離原本的排版流，跟 relative 有點像，但是會黏在最近的 "scrolling ancestor" 上。 --- #### CSS選取器＋號 - 跟在後面的那一個 ```css= .box + p{ color: blue; } ``` ![](https://i.imgur.com/75t2aK1.png =200x) --- #### 選取器 ~ - 跟在物件後面的所有同類型物件 ```css= h1 ~ p{ color: red; } ``` ![](https://i.imgur.com/tKBScga.png =300x) --- #### 選取器 > - 選取下一層 ```css= .box, .box div{ border: 4px solid red; padding: 40px; background-color: #ccc; } .box > div{ background-color: #faa; } /*-----------*/ <div class="box"> <div> <div></div> </div> </div> ``` ![](https://i.imgur.com/Poqmsre.png =150x) 使用範例： 導覽列選單下一層、的下一層 - [ ] 觀看影片：網頁切版教學：013-015側邊選單 - [ ] https://www.youtube.com/playlist?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo ##### 導覽選單 - 巢狀結構 - 不可能用a再包a - li裡面放a - 第二層：li裡面再放ul>li ```css= nav > ul{ display: flex; } nav ul ul{ display: none; position: absolute; } nav >ul Li:hover ul{ display: block; } nav a{ display: block; padding: 10px 20px; border: 1px solid red; } ``` ![](https://i.imgur.com/tPiH7lT.png =200x) 加分隔線（不使用邊框線） 邊框線問題：包含連結，碰到會點到連結 ```css= nav a{ display: block; padding: 10px 20px; /* border: 1px solid red; */ } nav li{ position: relative; } nav > ul linav > ul li + li::before{ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; height: 1em; width: 1px; background-color: red; } ``` ![](https://i.imgur.com/M0jTQ3f.png =200x) --- ## overflow 各家瀏覽器捲軸有些在html有些在body ```css= html body{ overflow:hidden; /*捲軸就隱藏，無法往下捲*/ } ``` 內容超出範圍： - 預設visible:超出範圍 - hidden: 隱藏起來 - scroll: 出現卷軸 - windows上會強迫出現卷軸（上下左右，不論有沒有需要） ![](https://i.imgur.com/iqmRDWu.png =200x) - Mac有捲軸但隱藏起來 - auto: 自動判斷要不要捲軸 - *應用：圖片容器： - 若圖片非正方形，做圓角50%時，會變成長橢圓形 ![](https://i.imgur.com/XZlMLJX.png =100x) - 所以使用外容器50%圓角＋overflow hidden，做出不管圖型大小如何的造型 ```css= .pic{ width: 200px; height: 200px; border: 4px solid red; border-radius: 50%; overflow: hidden; } .pic img{ /* border-radius: 50%; */ } ``` ![](https://i.imgur.com/vAIxEew.png =100x) --- ## CSS選取器 #### + 選同一層的後面一個 - 使用範例：選單中間的分隔線 - ![](https://i.imgur.com/uPGItTE.png =200x) 方法一: 使用＋ ```css= nav a{ padding: 0 20px; } nav a + a{ border-left: 1px solid reb; } ``` 方法二：使用first/last-child ```css= nav a{ padding: 0 20px; border-right: red 1px solid; } nav a:last-child{ border-right: none; } ``` 方法三：使用::not(:first-child) ```css= nav a{ padding: 0 20px; border-right: red 1px solid; } nav a::not(:first-child){ border-right: 1px solid red; } ``` --- ### child: 順序的重要性 （從後面看過去） ==其實 child 不是 child，而是兄弟的概念。== ==要看**結構**：從父層來看，不是爺爺層(上上層)來看== ==如有相連的兩個條件，要從後面的先解讀，再往前符合條件== ==空白代表往下一層== ==如使用 + ~ > 這三種符號則前後的空白沒作用== ```css= .box span:first-child{ background-color:red; } /*指第一個box內的子物件，且須符合span這個形態*/ /* span 與 :first-child 相連，先解讀後者。 */ ``` 同時具備才會被選到↑ ```css= :first-child /*第一個子物件*/ :first-of-type /*第一個類型*/ :last-child /*最後一個子物件*/ :last-of-type /*最後一個類型子物件*/ :nth-child() /*第Ｎ個子物件*/ :nth-of-type() /*第Ｎ個類型的子物件*/ :nth-last-child() /*倒數第Ｎ個子物件*/ :nth-last-of-type() /*倒數第Ｎ個類型的子物件*/ ``` ```css= .list :nth-child(3) span{ background-color: red; } ``` ![](https://i.imgur.com/Ca7KdKj.png =50x) ```css= .list :nth-child(3){ color: red;} /* class="list"的下一層中第三個物件 */ .list li:nth-child(3){ color: red;} /* class="list"的下一層中第三個物件且要是 li 標籤 */ .list span:nth-child(3){ color: red;} /* class="list"的下一層中第三個物件且要是 span 標籤 */ .list :nth-child(3) span{ color: red;} /* 此為正確答案 */ /* class="list"的下一層中第三個物件的下一層中的 span 標籤 */ ``` #### :nth-child(an+b) ＊固定公式(CSS內建函式) a,b為變數，可帶入 - a = 每 a 個跳一次 - n = 瀏覽器會自動 n=0, n=1, n=2... 一路加上去 - b = 前後位移個數 - 如果值為負數或是超出現有個數，就不會套用 - (-an+b) = 從第 b 個開始往前方跳，一次跳 a 個 範例： ```css= ul :nth-child(n+5):nth-last-child(n+4){ background-color: red; } ``` ![](https://i.imgur.com/Q5aSBuo.png =200x) --- ### 圓角 border-radius: 順序 左上->右上->右下->左上 (從左上開始順時針排列) 解釋時間=> 16:47 #### egg 蛋形 將圓角寫成八個值 ![](https://i.imgur.com/YRmfdHI.png =200x) ```css= border-radius: Ax Bx Cx Dx / Ay By Cy Dy; ``` **相連的直徑相加要小於100，否則爆出** |border-radius:| A B C D | /| A B C D;| |--|--|--|--| | |X軸|==斜線為必要判斷XY軸==|Y軸| ![](https://i.imgur.com/hfWLfYI.png =100x) ```css= border-radius: 50% / 60% 60% 40% 40%; background-image: linear-gradient(90deg, blue 0%, #faa 100%); /* 漸層色 */ ```