CSS3

1.CSS3選擇器
- 1.1新增基礎選擇器
- - 1.1.1 子元素選擇器（>）
  - 1.1.2 相鄰元素選擇器（+）
  - 1.1.3通用兄弟選擇器（~）
  - 1.1.4群組選擇器（，）
- 1.2屬性選擇器
- - 1.2.1 标簽名[标簽屬性]
  - 1.2.2 标簽名[标簽屬性="值"]
  - 1.2.3 标簽名[标簽屬性~="值"] （用于多值，包含所寫的值有效）
  - 1.2.4 标簽名[标簽屬性^ ="值"] （開頭包含，多值預設采取第一個）
  - 1.2.4 标簽名[标簽屬性$ ="值"] （結尾包含，多值預設采取最後一個）
  - 1.2.4 标簽名[标簽屬性* ="值"] （全部包含）
  - 1.2.4 标簽名[标簽屬性*|="值"] （值，值-）
- 1.3僞類選擇器
- - 1.3.1動态僞類
  - - 1.3.1.1 錨點僞類
    - 1.3.1.2使用者行為僞類
  - 1.3.2UI元素狀态僞類
  - 1.3.3CSS3結構類（nth選擇器）
  - - 1.3.3.1 :first-child(父元素裡第一個元素)
    - 1.3.3.2 :last-child(父元素裡最後一個元素)
    - 1.3.3.3 :nth-child(n){}(父元素裡第n個元素)
    - 1.3.3.4 :nth-last-child(n){}(父元素裡倒數第n個元素)
    - 1.3.3.5 :nth-of-type(n){}(父元素裡特定第n個元素)
    - 1.3.3.6 :nth-last-of-type(n){}(父元素裡倒數特定第n個元素)
    - 1.3.3.7 :first-of-type(父元素裡特定第一個元素)
    - 1.3.3.8 :last-of-type(父元素裡特定最後一個元素)
    - 1.3.3.9 :only-child(父元素唯一個子元素，元素必須是特定元素)
    - 1.3.3.10 :only-of-child(父元素唯一個特定元素)
    - 1.3.3.11 :empty(比對父元素裡沒有任何内容的标簽)
  - 1.3.4否定選擇器（:not）
  - 1.3.5僞元素
  - - 1.3.5.1 ::first-line(控制第一行文字)
    - 1.3.5.2 ::first-letter(控制第一個文字)
    - 1.3.5.3 ::before(在元素内容前插入新的内容)
    - 1.3.5.4 ::after(在元素内容後插入新的内容)
    - 1.3.5.4 ::selection(浏覽器中選中文本的背景與前景顔色)

1.CSS3選擇器

1.1新增基礎選擇器

1.1.1 子元素選擇器（>）

div>p{
	color:#f00;
	}

之有子級的生效，更下級後代沒效果。

1.1.2 相鄰元素選擇器（+）

div+p{
	color:#f00;
	}

隻有在同一個父元素中，隻有元素下面第一個元素有效果。（相鄰且向下）

1.1.3通用兄弟選擇器（~）

div~p{
	color:#f00;
	}

隻有在同一個父元素中，隻有元素下面元素素有效果。（向下）

1.1.4群組選擇器（，）

div,p,a,.pap{
	color:#f00;
	}

寫到誰誰生效

1.2屬性選擇器

1.2.1 标簽名[标簽屬性]

a[href]{
	color:#f00;
	}

a 标簽有href屬性生效

1.2.2 标簽名[标簽屬性=“值”]

a[href="#" target="_blank" rel="external nofollow" ]{
	color:#f00;
	}

a 标簽有href屬性且值是#生效

1.2.3 标簽名[标簽屬性~=“值”] （用于多值，包含所寫的值有效）

a[class="#"]{
	color:#f00;
	}

用于多值，包含所寫的值有效

1.2.4 标簽名[标簽屬性^ =“值”] （開頭包含，多值預設采取第一個）

a[clas^s="#"]{
	color:#f00;
	}

開頭包含#，多值預設采取第一個

1.2.4 标簽名[标簽屬性$ =“值”] （結尾包含，多值預設采取最後一個）

a[class$="#"]{
	color:#f00;
	}

結尾包含#，多值預設采取最後一個

1.2.4 标簽名[标簽屬性* =“值”] （全部包含）

a[class*="#"]{
	color:#f00;
	}

隻要包含#，就改樣式

1.2.4 标簽名[标簽屬性*|=“值”] （值，值-）

a[class|="#"]{
	color:#f00;
	}

#和以#-開頭的，改樣式

1.3僞類選擇器

1.3.1動态僞類

1.3.1.1 錨點僞類

:link 未通路的連結

:visitrd 已通路的連結

1.3.1.2使用者行為僞類

:hover 當有滑鼠懸停在連結上

:active 被選擇的連結(滑鼠點選不松手樣式)

:focus 輸入框等擷取光标

1.3.2UI元素狀态僞類

:disabled 輸入框禁用

:enabled 輸入框未禁用

:checked 單選複選選中

1.3.3CSS3結構類（nth選擇器）

1.3.3.1 :first-child(父元素裡第一個元素)

a:first-child{
	color:#f00;
	}

a标簽父元素裡的第一個元素

1.3.3.2 :last-child(父元素裡最後一個元素)

a:last-child{
	color:#f00;
	}

a标簽父元素裡最後一個元素

1.3.3.3 :nth-child(n){}(父元素裡第n個元素)

n是常數，也可以直接寫數值。

注意會把單标簽和樣式标簽算入。

值：2n和even 偶數

值：2n+1和2n-1和odd 奇數

a:nth-child(n){
	color:#f00;
	}

a标簽父元素裡第n個元素

1.3.3.4 :nth-last-child(n){}(父元素裡倒數第n個元素)

a:nth-last-child(n){
	color:#f00;
	}

a标簽父元素裡倒數第n個元素

1.3.3.5 :nth-of-type(n){}(父元素裡特定第n個元素)

a:th-of-type(n){
	color:#f00;
	}

a标簽父元素裡第n個特定元素

1.3.3.6 :nth-last-of-type(n){}(父元素裡倒數特定第n個元素)

a:th-last-of-type(n){
	color:#f00;
	}

a标簽父元素裡倒數第n個特定元素

1.3.3.7 :first-of-type(父元素裡特定第一個元素)

a:first-of-type{
	color:#f00;
	}

a标簽父元素裡第一個特定元素

1.3.3.8 :last-of-type(父元素裡特定最後一個元素)

a:first-of-type{
	color:#f00;
	}

a标簽父元素裡最後一個特定元素

1.3.3.9 :only-child(父元素唯一個子元素，元素必須是特定元素)

a:only-child{
	color:#f00;
	}

父元素裡隻有一個标簽，且标簽還是a标簽

1.3.3.10 :only-of-child(父元素唯一個特定元素)

a:only-of-child{
	color:#f00;
	}

父元素裡可以有多個标簽，a标簽隻能有一個才能實作

1.3.3.11 :empty(比對父元素裡沒有任何内容的标簽)

div:empty{
	}

比對父元素裡所有沒有内容和下級标簽的div标簽

1.3.4否定選擇器（:not）

父元素:not(子元素/子元素選擇器)

div:not(:nth-child(3)){
	}

元素裡第3個實作效果

1.3.5僞元素

僞元素不在html顯示，正通過開發者模式檢視到僞元素的名字

1.3.5.1 ::first-line(控制第一行文字)

div::first-line{
	colo:#f00;
	}

控制第一行文字,不适合行内元素。（行内元素預設位子是一行）

1.3.5.2 ::first-letter(控制第一個文字)

div::first-letter{
	colo:#f00;
	}

控制第一個文字

1.3.5.3 ::before(在元素内容前插入新的内容)

div::before{	
		content："我在内容的前面";
	}

在元素内容前插入新的内容

1.3.5.4 ::after(在元素内容後插入新的内容)

div::after{	
		content："我在内容的後面";
	}

在元素内容後插入新的内容

1.3.5.4 ::selection(浏覽器中選中文本的背景與前景顔色)

div::selection{	
		content："我在内容的後面";
	}

浏覽器中選中文本的背景與前景顔色

CSS3（新增選擇器，nth選擇器，僞元素）1.CSS3選擇器