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

unknow發表於2020-04-03
前端CSS

最近寫頁面感覺有些選擇器已經忘了，於是乎重新整理了一遍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;  // 段落1、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

相關文章