css選擇器總結

1、屬性選擇器

1. 屬性選擇器

屬性選擇器(Attribute selector)讓你能夠基於屬性來定位一個元素。你能夠只指定該元素的某個屬性，這樣全部使用該屬性——而無論它的值——的這個元素都將被定位，也能夠更加明確並定位在這些屬性上使用特定值的元素 —— 這就是屬性選擇器展現它們的威力的地方。

有6個不一樣類型的屬性選擇器attr：

 

[att=value]   // 該屬性有指定的確切的值。
[att~=value]  //該屬性的值必須是一系列用空格隔開的多個值，(好比，class=」title featured home」)，並且這些值中的一個必須是指定的值」value」。
[att|=value] //屬性的值就是「value」或者以「value」開始並當即跟上一個「-」字符，也就是「value-」。(好比lang=」zh-cn」)
[att^=value] // 該屬性的值以指定值開始。
[att$=value] //該屬性的值包含指定的值(而不管其位置)。
[att*=value] //該屬性的值以指定的值結束

 

---------------------------------

2、子選擇器 >

子選擇器用符號「>」表示。它容許你定位某個元素的第一級子元素。

好比，若是你想匹配全部的做爲你的網站側欄的div的子元素的h2元素，而不是多是在div元素內的全部h2元素，也不是div的孫元素(或者更低級別的)，你就可使用下面的選擇器：

div#sidebar > h2 {   font-size: 20px;   }

div#sidebar  h2 {   font-size: 20px;   }  // div元素內的全部h2元素,包括子、孫、子子孫孫的h2

 

---------------------------------

3、 兄弟 + ~

兄弟組合

有兩類兄弟組合：臨近兄弟組合和普通兄弟組合

• 臨近兄弟組合 +

該選擇器使用加號「+」來連接先後兩個選擇器。選擇器中的元素有同一個父親，並且第二個必須牢牢的跟着第一個。

• 普通兄弟組合 ~

普通兄弟組合則能匹配全部

CSS:

p + h2{color:red;   } 
p ~ h2{font-weight:700;   }

HTML:

<p>咳咳，內容。</p>
<h2>標題1</h2>
<h2>標題2</h2>

 

---------------------------------

4. 僞類

:link 
:visited
:hover
:active 
:focus。

:first-child

:first-child僞類容許你定位某個元素第一個子元素

語言僞類

:lang()  //:lang(en)

語言僞類:lang()，容許你匹配一個基於它的語言的元素

---------------------------------

5. CSS 3 僞類

:target

當你使用錨點(片斷標識符 fragment identifier)的時候，好比，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，這「#comments」就是一個片斷標識符，你就可使用:target僞類來控制目標的樣式

 

:enabled
:disabled 
:checked 

---------------------------------------

6. CSS 3 結構僞類

:nth-child(n)  //ul li:nth-child(3)

:nth-child()僞類容許你定位某個父級元素的一個或多個特定的子元素.

ul li:nth-child(3n+4) {   color: yellow;   }
// 你可使用表達式來定位子元素。好比，下面的表達式將從第四個開始匹配每第三個元素。

 

--------------------------------------

::before 和 ::after

::before和::after 僞元素用於在一個元素的前面或後面插入內容，純CSS方法。必須有content屬性，，能夠設置display,width\height\border\color 等屬性；

這些元素將繼承它們將附加的元素的大部分屬性。能夠作出不少效果

好比加書名號，或特定文字

 p.description::before { 
  content: "《";
  }
 p.description::after { 
  content: "》";
  }

------------------references------------------------------------------

https://blog.csdn.net/qq_27828675/article/details/73089649