Html CSS學習（四）CSS選擇器

時間 2019-11-06

標籤 html css 學習選擇器欄目 HTML 简体版

原文原文鏈接

CSS選擇器

Html用於呈現網頁的內容與結構，CSS用於設置頁面中內容的外觀，即表現形式，在對內容進行樣式的設置時，首先要選擇欲應用樣式的內容，這主要經過CSS的選擇器進行。本部份內容主要對CSS選擇器進行學習。html

1、基礎選擇器

1.通配符 *學習

選定文檔內全部的對象，一般用於對全局內容樣式的設置。ui

2.ID選擇器 #IDspa

在HTMl中，ID的使用要儘可能少用，以加強CSS代碼的通用性。ID主要用於頁面區塊內容的劃分。.net

3.類選擇器 .classNamecode

經過class屬性進行選擇，是使用最多的一種方式htm

4.標籤選擇器對象

經過標籤類型進行選擇事件

例1.基礎選擇器的使用ip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>選擇器</title>
</head>
<body>
    <div id="wrap">
        <header></header>
        <div class="page_body"></div>
        <footer></footer>
    </div>
</body>
</html>

2、關係選擇符

Selectors 選擇符	Name 名稱	CSS Version 版本	Description 簡介
E F	包含選擇符(Descendant combinator)	CSS1	選擇全部被E元素包含的F元素。
E>F	子選擇符(Child combinator)	CSS2	選擇全部做爲E元素的子元素F。
E+F	相鄰選擇符(Adjacent sibling combinator)	CSS2	選擇緊貼在E元素以後F元素。
E~F	兄弟選擇符(General sibling combinator)	CSS3	選擇E元素全部兄弟元素F。

3、屬性選擇符

Selectors 選擇符	CSS Version 版本	Description 簡介
E[att]	CSS2	選擇具備att屬性的E元素。
E[att="val"]	CSS2	選擇具備att屬性且屬性值等於val的E元素。
E[att~="val"]	CSS2	選擇具備att屬性且屬性值爲一用空格分隔的字詞列表，其中一個等於val的E元素。
E[att^="val"]	CSS3	選擇具備att屬性且屬性值爲以val開頭的字符串的E元素。
E[att$="val"]	CSS3	選擇具備att屬性且屬性值爲以val結尾的字符串的E元素。
E[att*="val"]	CSS3	選擇具備att屬性且屬性值爲包含val的字符串的E元素。
E[att\|="val"]	CSS2	選擇具備att屬性且屬性值爲以val開頭並用鏈接符"-"分隔的字符串的E元素。

4、僞類選擇符

Selectors 選擇符	CSS Version 版本	Description 簡介
E:link	CSS1	設置超連接a在未被訪問前的樣式。
E:visited	CSS1	設置超連接a在其連接地址已被訪問過期的樣式。
E:hover	CSS1/CSS2	設置元素在其鼠標懸停時的樣式。
E:active	CSS1/CSS2	設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。
E:focus	CSS1/CSS2	設置元素在成爲輸入焦點（該元素的onfocus事件發生）時的樣式。
E:lang()	CSS2	匹配使用特殊語言的E元素。
E:not()	CSS3	匹配不含有s選擇符的元素E。
E:root	CSS3	匹配E元素在文檔的根元素。
E:first-child	CSS2	匹配父元素的第一個子元素E。
E:last-child	CSS3	匹配父元素的最後一個子元素E。
E:only-child	CSS3	匹配父元素僅有的一個子元素E。
E:nth-child(n)	CSS3	匹配父元素的第n個子元素E。
E:nth-last-child(n)	CSS3	匹配父元素的倒數第n個子元素E。
E:first-of-type	CSS3	匹配同類型中的第一個同級兄弟元素E。
E:last-of-type	CSS3	匹配同類型中的最後一個同級兄弟元素E。
E:only-of-type	CSS3	匹配同類型中的惟一的一個同級兄弟元素E。
E:nth-of-type(n)	CSS3	匹配同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n)	CSS3	匹配同類型中的倒數第n個同級兄弟元素E。
E:empty	CSS3	匹配沒有任何子元素（包括text節點）的元素E。
E:checked	CSS3	匹配用戶界面上處於選中狀態的元素E。(用於input type爲radio與checkbox時)
E:enabled	CSS3	匹配用戶界面上處於可用狀態的元素E。
E:disabled	CSS3	匹配用戶界面上處於禁用狀態的元素E。
E:target	CSS3	匹配相關URL指向的E元素。
@page:first	CSS2	設置頁面容器第一頁使用的樣式。僅用於@page規則
@page:left	CSS2	設置頁面容器位於裝訂線左邊的全部頁面使用的樣式。僅用於@page規則
@page:right	CSS2	設置頁面容器位於裝訂線右邊的全部頁面使用的樣式。僅用於@page規則

5、僞對象選擇符

Selectors 選擇符	CSS Version 版本	Description 簡介
E:first-letter/E::first-letter	CSS1/CSS3	設置對象內的第一個字符的樣式。
E:first-line/E::first-line	CSS1/CSS3	設置對象內的第一行的樣式。
E:before/E::before	CSS2/CSS3	設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用
E:after/E::after	CSS2/CSS3	設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用
E::selection	CSS3	設置對象被選擇時的顏色。