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="#"]{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选择器，伪元素）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。