CSS 黑科技 - 學習筆記

---

rem 來調整全域大小；用 em 來調整區域大小

:nth-child(-n)

指定第幾個子元素
e.g -> tr:nth-child(n+5):nth-child(-n+10) - 選擇 5~10

:only-of-type

指定特定類型

:empty

指定空元素
e.g -> p:empty { display: none; }

[attr=value]

指定特定值 / ~ 分隔 / ^ 開始 /$ 結束 /* 包含 / | - 開頭 /
e.g -> a[href$=”.pdf”] { background-image: url(“icon-pdf.png”); }
e.g -> class=”top-header” , [class|=top]

---

:after {content: attr(data-msg);}

元素後方顯示特定值
e.g -> a[href^=”http”]:empty::before {content: attr(href);}
填滿空白連結的文字內容

:valid和:invalid

有無輸入符合條件的值

---

unset 重置所有屬性 目前 all 屬性在 IE11 並不支援

button { all: unset;}

“貓頭鷹” 選擇器 -> +

e.g -> + {margin-top: 1.5em;}
在文件中所有的元素，只要緊接著其他元素，就會套用一個 margin-top: 1.5em 樣式。

table-layout: fixed

表格中每個儲存格維持等寬

---