2022-12-06

Style

Css3 選取器

CSS Reset：是把所有瀏覽器最不一致的地方強制歸 0

1
2
3

*{
    ....
}

CSS Normalize

保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整

超連結的動態僞類選取器

link：尚未點擊
hover：滑鼠觸碰
active：點擊當下
focus：取得焦點
visited：點擊過後

:nth-child(n) 偽類選取器：選取特定順序項目,n代表的是由0起始的遞增數字

:nth-child(odd) 偽類選取器：選取單數

:nth-child(even) 偽類選取器：選取偶數

:nth-child(an+b) 偽類選取器：「n」代表的是由0起始的遞增數字，a 與 b 則是你可以自訂的一個數值

1
2
3

tr:nth-child(3n+1){
	background-color:#69C;
}

:first-child 偽類選取器：頭

:last-child 偽類選取器：尾

:first-of-type 偽類選取器:first-of-type

:last-of-type 偽類選取器:last-of-type

:not(值) 偽類選取器：選取…以外的項目，我要選到 li 標籤，但是不要選到(值) li

:empty 偽類選取器：選到空的

:first-letter 偽類選取器：首字選取器

:lang 語言僞類選取器

:checked 表單狀態選取器：開開關關

checkbox 在被勾選時變大

1	#box1:checked{ transform: scale(2); }

::selection 選取狀態僞元素

color (文字色彩)
background-color （背景色彩）
cursor （滑鼠游標）
caret-color （閃動標點）
outline （外框線）
text-decoration （文字裝飾）
text-emphasis-color （文字加重強調符號色彩）
text-shadow （文字陰影）

::before & ::after僞元素選取器

content內的值
none
normal
string:字串
url
counter:自訂要建立計數的區域名稱
attr
open-quote
close-quote
no-open-quote
no-close-quote
counter-increment: 自訂要建立計數的區域名稱欲遞增的數
counter-reset: 自訂要建立計數的區域名稱起始數

attr:取得的HTML屬性的值
取得 HTML 中 data-note

a::after{
	content: attr(data-note);
	color: #aaa;
}

Ａ＋Ｂ選取器

h1選到 h1 後面的那一個 p

1	h1 + p { color: red; }

Ａ~Ｂ選取器

全部的 P 都會變成紅色的

1	h1 ~ p { color: red; }

alt特定屬性

所有圖片被加上一個10像素的紅色邊框，只有 alt 屬性的圖片則不會有邊框

1 2	img { border: 10px solid red; } img[alt] { border:none; }

alt^特定屬性

alt 屬性中含有『燒腦』這個文字的圖片，並且讓它消失不見了

1	img[alt^="燒腦"] { display: none; }

屬性$=值：選取 Html屬性值的結尾等於特定文字(字串)的物件:

1 2	a[href$=".png"] { background-image: url("icon-png.png"); } a[href$=".png" i] { background-image: url("icon-png.png"); }

屬性*=值：選取屬性值中【包含特定文字】的物件

圖片的 alt 屬性值中必須同時包含有燒腦以及哈哈

1	img[alt="燒腦"][alt="哈哈"] { display: none; }

Lara Blog