前端基礎之CSS選擇器，你真的都瞭解嗎？

最近寫頁面感受有些選擇器已經忘了，因而乎從新整理了一遍css選擇器。大家還記得多少種選擇器呢，每一種選擇器的用法都還記得嗎

那麼下面咱們一塊兒來複習一下吧

ID選擇器

以#加id名來表示, id是惟一的，同一個頁面裏不容許多個ID相同的元素。通常只用來強調某個頁面或者某個模塊，多個功能相同的模塊建議使用類選擇器。

<div id="box"> 我是box </div>

<!--css-->
#box{
    color: #fff;
    background: #000;
}
複製代碼

類選擇器

以.加上class名稱來表示，下面以class 名稱爲 item 的元素爲例

<ul>
    <li class="item"> a </li>
    <li class="item"> b </li>
    <li class="item"> c </li>
    <li class="item"> d </li>
</ul>

<!--css-->
.item {
  margin: 0;
  padding: 0;
}
複製代碼

標籤選擇器

直接標籤名做爲選擇器的名稱，若是使用標籤選擇器，那麼該頁面全部使用該標籤的元素樣式都會改變，通常不建議使用。

<p> hello world </p>
<p> 你好呀~ </p>

<!--css-->
p {
    color: red;
}
複製代碼

屬性選擇器

• [attr]表示選擇全部帶有attr屬性的標籤

<p title="hello world"> hello world </p>
<p title="test"> 你好呀~ </p>

<!--css-->
p[title] {
  color: red;
}
複製代碼

• [attr=xxx]表示用來選擇有attr屬性且屬性值等於xxx的元素，注意屬性值必須徹底相等

<input class="input text" type="text" value="hello world"/>

<!--css-->
input[type=text] {
  color: red;
}
// or
input[class="input text"]{
  color: red;
}
複製代碼

• [attr~=xxx] 表示包含某個類的元素，多個類中的其中一個類名必須和xxx相等

<input class="input text" type="text" value="hello world"/>

<!--css-->
input[class~=input] {
  color: red;
}
複製代碼

• [attr|=xxx] 表示選擇屬性值爲xxx（這裏必須是相等的）或者 以xxx-屬性開頭的元素

<div class="box"> box <div>
<div class="box-sm"> box <div>

<!--這裏的div不會生效, 這裏必須是 box- 開頭-->
<div class="box_lg"> box <div>
<!--css-->
div[class|=box] {
  color: red;
}
複製代碼

• [attr^=xxx]表示選擇以xxx屬性開頭的元素

<div class="box"> box <div>
<div class="box-sm"> box <div>
<div class="box_lg"> box <div>
<!--css-->
div[class^=box] {
  color: red;
}
複製代碼

• [attr$=xxx]表示選擇以xxx屬性結尾的元素

<div class="box"> box <div>
<div class="box red blue"> box <div>
<div class="box _red"> box <div>
<!--css -->
<!--這裏以red結尾的樣式類必須寫在最後，不然有可能會被後面的樣式覆蓋-->
div[class$=red] {
  color: red;
}
複製代碼

• [attr*=xxx]表示選擇屬性值中包含xxx的全部元素

<div class="box-sm"> box <div>
<div class="box sm blue"> box <div>
<div class="box _sm"> box <div>
<!--css -->
div[class*=sm]{
  color: red;
}
複製代碼

通配符選擇器

通配符顧名思義，就是全部標籤所有適用，把樣式應用到全部元素上影響瀏覽器渲染效率，實際開發中不建議使用。

* {
   margin: 0;
   padding: 0;
 }
複製代碼

後代選擇器

又稱派生選擇器，派生選擇器爲css2的說法。 以seletorA空格selectorB形式，表示在selectorA內部向下查找全部全部符合selectorB的元素，不管層級有多深依然會被做用。舉個栗子：

<div class="box">
    <p> 段落 </p>
    <div class="outer">
        <div class="inner"> 這是一段內容呀~ </div>
    <div>
</div>

<!--css-->
.box .inner {
  color: red;
}

複製代碼

固然， 後代選擇器能夠疊加使用，如：

.box .outer .inner {
  color: red;
}
複製代碼

不過值得注意的是：CSS選擇器是從右到左進行匹配的，嵌套的層級越深，css選擇器查找的效率就越低，以及權重就太低可能會被其餘的樣式所覆蓋，建議酌情使用。附css權重表：

選擇器	用法	權重值
!important	放在屬性值後， 如color: red !important;	10000
內聯樣式	style="xxx"	1000
ID選擇器	#box	100
類、僞類、屬性選擇器	.box、:hover、div[class=box]	10
標籤選擇器和僞元素選擇器	p、:before	1
通配符* 子選擇器> 相鄰選擇器+ 同胞選擇器~	略	0

子元素選擇器

以selectorA>selectorB的形式，表示只查找指定元素的直接子元素，層級爲一層。

<div class="box">
    <p> 段落 </p>
    <div class="outer">
        <p> 這是一段內容呀~ </p>
    <div>
</div>
<!--css-->
.box > p {
  color: red; // 這裏只會做用在段落上
}
複製代碼

相鄰兄弟選擇器

以selectorA+selectorB的形式，表示選擇緊接在指定元素後的元素，且兩者有相同父元素。 注意他只有一個兄弟呀~

<div class="main">
  <h1>標題</h1>
  <p>段落</p>
</div>
<!--css-->
h1 + p {
  color: red; // 段落字體變紅色
}
複製代碼

同胞選擇器

以selectorA~selectorB形式，表示選擇指定元素全部符合條件的全部兄弟元素， 他可能有多個兄弟

<div class="main">
  <h1>標題</h1>
  <p>段落1</p>
  <p>段落2</p>
</div>
<!--css-->
<!--符合兩個條件：1：h1的兄弟元素； 2：凡是p標籤包裹的-->
h1 ~ p {
  color: red;  // 段落一、2字體都變紅
}
複製代碼

交集選擇器

以selectorA.selectorB形式，表示既符合選擇器A又符合選擇器B的元素

<ul>
  <li class="item"> btn1 </li>
  <li class="item active"> btn2 </li>
</ul>
<!--css-->
.item.active {
  color: red;  // 表示有active類的，又有item類的。
}
複製代碼

並集選擇器

以seltorA,selectorB逗號分隔的形式，表示不一樣的選擇器A和選擇器B的元素都應用同一種樣式。

<div class="box1"> 段落1 </div>
<div class="box2"> 段落2 </div>
<!--css-->
.box1, .box2 {
  color: red;
}
複製代碼

僞類選擇器

以selector加:的的形式，CSS 僞類用於向某些選擇器添加特殊的效果，這裏只列舉常見的幾種：

• 表示狀態：

選擇器	做用	栗子
x:link	未訪問的連接	a:link
x:visited	已訪問的連接	a:visited
x:hover	鼠標移動到連接上	a:hover
x:active	選定的連接	a:acitve
x:focus	選定元素聚焦時的樣式	input:focus

• 表示結構:

選擇器	做用	栗子
x:first-child	第一個子元素爲x	ul li:first-child
x:last-child	最後一個子元素爲x	ul li:last-child
x:nth-child(n)	第n個位置的子元素x，不分元素類型	ul li:nth-child(even)
x:nth-last-child(n)	同上，倒數第n個位置的子元素x	ul li:nth-last-child(2)
x:only-child	惟一子元素爲x	a span:only-child
x:only-of-type	惟一子元素爲x, 且x沒有其餘同類型的兄弟元素	a span:only-of-type

• 表單相關:

選擇器	做用	栗子
x:empty	空標籤（有空格也不行）	span:empty
x:checked	勾選input的狀態（值爲true或false）	input:checked
x:disabled	表單元素是否禁用（值爲true或false）	input:disabled
x:required	表單元素是必填項時設置指定樣式	input:required

僞元素選擇器

CSS 僞元素用於將特殊的效果添加到某些選擇器

選擇器	做用	栗子
x::after	在元素x的內容前面插入新內容	a:after
x::before	在元素x的內容後面插入新內容	a:before
x::first-line	爲某個元素的第一行文字使用樣式	p:first-line
x::first-letter	爲某個元素中的文字的首字母或第一個字使用樣式	p:first-letter
x::selection	給光標選中的元素x添加樣式	input:selection