css知識總結——選擇器

css選擇器規定了css規則用於那些元素上

基本選擇器

選擇器	示例	示例說明
*	*	通用元素選擇器， 匹配所有的元素。
. class	.info	類選擇器，匹配所有class屬性值中包含info的元素。
element	p	標籤選擇器。匹配p標籤。
#id	#info	id選擇器，匹配id屬性爲#info的元素。

組合選擇器

選擇器	示例	示例說明
element + element	div + p	緊鄰兄弟選擇器。選擇緊接着div元素的第一個p元素
element > element	div > p	子元素選擇器。選擇所有父級元素爲div元素的p元素
element，element	div ， p	多元素選擇器。 選擇所有的div元素和p元素
element~ element	div~p	一般兄弟選擇器。將會匹配同一父元素下，div 元素後的所有 p 元素。
element element	div p（中間有一個空格）	後代選擇器。將會將匹配 div 元素內所有的 p 元素。

僞類

僞類較多，只列舉一些比較常用的

選擇器	示例	示例說明
:hover	div:hover	匹配鼠標懸停在上方的div元素
:link	a:link	匹配所有未被訪問的鏈接
:visited	a:visited	匹配所有已被訪問的鏈接
:active	a:active	匹配所有活動鏈接
:focus	input:focus	匹配獲得焦點的input元素
:disabled	input:disabled	匹配被禁用的input元素
:enabled	input:enabled	匹配處於啓用狀態的input元素
:first-child	p:first-child	匹配其父元素的第一個子元素p。
:last-child	p:last-child	匹配父元素的最後一個子元素p
:only-child	p:only-child	匹配父元素中唯一一個子元素p
:first-of-type	p:first-of-type	匹配其父元素中第一個出現的p元素
:last-of-type	p:last-of-type	匹配其父元素中最後一個出現的p元素
:only-of-type	p:only-of-type	匹配其父元素中沒有與其相同類型的子元素

nth-child(an + b)

這個 CSS 僞類首先找到所有當前元素的兄弟元素，然後按照位置先後順序從1開始排序，依此類推。示例：

注意：a 和 b 都必須爲整數，並且元素的第一個子元素的下標爲 1。an 必須寫在 b 的前面，不能寫成 b+an 的形式。

• p:nth-child(0n + 3) 或者是p:ntn-child(3)。匹配 父元素中第3個子元素，如果該子元素是p元素，就會被匹配。
• p:nth-child(1n+0) 或簡單的 p:ntn-child(n)。匹配父元素中的每個p元素
• p:nth-child(2n)。匹配父元素中2，4，6，8。。。偶數位置的p元素，如果該位置上是p元素，就會被匹配，如果不是，就不會配匹配
• p:nth-child(2n + 1)。匹配父元素中1，3，5，7。。。奇數位置上的p元素。
• p:nth-child(3n + 4)。匹配父元素中4，7，10，13。。。位置上的p元素。

:nth-last-child(an + b)

這個 CSS 僞類匹配文檔樹中在其之後具有 an+b-1個兄弟節點的元素，其中 n 爲正值或零值。它基本上和 :nth-child一樣，只是它從結尾處反序計數，而不是從開頭處。其用法參考:nth-child

:nth-of-type(an+b)

與:nth-child用法一樣，但是只匹配使用同種標籤的元素。例如:

HTML

<div>
  <div>這段不參與計數。</div>
  <p>這是第一段。</p>
  <p>這是第二段。</p>
  <div>這段不參與計數。</div>
  <p>這是第三段。</p>
  <p>這是第四段。</p>
</div>

CSS

/* 奇數段 */
p:nth-of-type(2n+1) {
    color: red;
}

/* 偶數段 */
p:nth-of-type(2n) {
   color: blue;
}

 /* 第一段 */
p:nth-of-type(1) {
   font-weight: bold;
}

效果圖

:nth-last-of-type(an+b)

它基本上和 :nth-of-type一樣，只是它從結尾處反序計數，而不是從開頭處。

僞元素

就像 pseudo classes (僞類)一樣， 僞元素也可以添加到選擇器，但不是描述特殊狀態，它們允許您爲元素的某些部分設置樣式。

所有的僞元素:

• ::after
• ::befor
• ::first-letter
• ::frirst-line
• ::selection

::after

::after用來創建一個僞元素，作爲已選中元素的最後一個子元素。通常會配合content屬性來爲該元素添加裝飾內容。這個虛擬元素默認是行內元素。例如：

HTML

<div>
  <p class="first-text">這是第一段文字</p>
  <p>這是第二段文字</p>
  <p class="third-text">這是第三段文字</p>
</div>

CSS

.first-text::after {
    content: "<- 讓人興興興奮!";
    color: blue;
}

.third-text::after {
   content:    "<- 無聊!";
   color:      red;
}

效果圖

::before

::before 創建一個僞元素，其將成爲匹配選中的元素的第一個子元素。常通過 content 屬性來爲一個元素添加修飾性的內容。此元素默認爲行內元素。
HTML

<div>
  <p class="first-text">這是第一段文字</p>
  <p>這是第二段文字</p>
  <p class="third-text">這是第三段文字</p>
</div>

CSS

.first-text::before {
    content: "<- 讓人興興興奮!";
    color: blue;
}

.third-text::before {
   content:    "<- 無聊!";
   color:      red;
}

效果圖

::first-letter

::first-letter會選中塊級元素第一行的第一個字母，並且文字所處的行之前沒有其他內容（如圖片和內聯的表格） 。

::first-line

::first-line在塊級元素的第一行應用樣式。第一行的長度取決於很多因素，包括元素寬度，文檔寬度和文本的文字大小。

::selection

::selection 應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。例如：

HTML

<div>
  <p class="first-text">這是一段文字這是一段文字這是一段文字這是一段文字</p>
  <p>這是第二段文字</p>
  <p class="third-text">這是第三段文字</p>
</div>

CSS

.first-text::selection {
      background-color: blue;
      color: white;
    }

效果圖