CSS 樣式選擇器，用于選中頁面中的 html 元素，以便添加 CSS 樣式。

按渲染性能由高到低 依次是：

ID 選擇器 #id

通過元素的 id 屬性選中元素，區(qū)分大小寫

<p id="p1" >第一段</p>

#p1{color: red;
}

但不推薦使用，因?yàn)?#xff1a;

• id 選擇器的優(yōu)先級較高，不方便重置樣式
• id 選擇器主要給 JS 使用

類選擇器 .class

通過元素的 class 屬性中的樣式類名選中元素，區(qū)分大小寫

最推薦使用的 CSS 選擇器，因?yàn)轭愡x擇器語義化強(qiáng)，且方便重置樣式。

<span class="important" >重點(diǎn)詞匯</span>

.important{color: red;font-weight: bold;
}

同一個元素，可以添加多個樣式類，用空格隔開

<span class="important big" >巨大的重點(diǎn)詞匯</span>

.important {color: red;font-weight: bold;
}
.big {font-size: 60px;
}

標(biāo)簽選擇器 標(biāo)簽名

通過元素的標(biāo)簽名選中元素，不區(qū)分大小寫

<a href="https://www.baidu.com/" target="_blank" >百度</a>

a {text-decoration: none; /* 無文本裝飾（消除默認(rèn)的下劃線） */
}

不推薦使用，因?yàn)闃?biāo)簽選擇器性能不佳，維護(hù)成本高

通配選擇器 *

選中頁面中除偽元素外的所有 html 元素，常用于清除瀏覽器的默認(rèn)樣式，但不推薦使用，因?yàn)橄男阅堋?/p>

/* 清除所有html標(biāo)簽?zāi)J(rèn)的外邊距和內(nèi)邊距 */
* {margin: 0;padding: 0;
}

屬性選擇器 [屬性]

根據(jù)元素的屬性和屬性值來選中元素，屬性不區(qū)分大小寫，屬性值區(qū)分大小寫

屬性選擇器	描述
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素，非常適合包含多種組合屬性值的場景
[attribute|=value]	屬性值起始片段選擇器，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結(jié)尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。

偽類選擇器 :狀態(tài)名

根據(jù)元素的不同狀態(tài)來選中元素

同一個標(biāo)簽，不同的狀態(tài)，有不同的樣式，就叫做“偽類”

偽類選擇器	例子	例子描述
:active	a:active	選擇活動的鏈接。（鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時）
:checked	input:checked	選擇每個被選中的<input> 元素。
:disabled	input:disabled	選擇每個被禁用的 <input> 元素。
:empty	p:empty	選擇沒有子元素的每個 <p> 元素。
:enabled	input:enabled	選擇每個已啟用的 <input> 元素。
:first-child	p:first-child	選擇作為其父的首個子元素的每個 <p> 元素。
:first-of-type	p:first-of-type	選擇作為其父的首個 <p> 元素的每個 <p> 元素。
:focus	input:focus	選擇獲得焦點(diǎn)的 <input> 元素。
:hover	a:hover	選擇鼠標(biāo)懸停其上的鏈接。
:in-range	input:in-range	選擇具有指定范圍內(nèi)的值的 <input> 元素。
:invalid	input:invalid	選擇所有具有無效值的 <input> 元素。
:lang(language)	p:lang(it)	選擇每個 lang 屬性值以 “it” 開頭的 <p> 元素。
:last-child	p:last-child	選擇作為其父的最后一個子元素的每個 <p> 元素。
:last-of-type	p:last-of-type	選擇作為其父的最后一個 <p> 元素的每個 <p> 元素。
:link	a:link	選擇所有未被訪問的鏈接。
:not(selector)	:not§	選擇每個非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	選擇作為其父的第二個子元素的每個 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	選擇作為父的第二個子元素的每個<p>元素，從最后一個子元素計(jì)數(shù)。
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇作為父的第二個<p>元素的每個<p>元素，從最后一個子元素計(jì)數(shù)
:nth-of-type(n)	p:nth-of-type(2)	選擇作為其父的第二個 <p> 元素的每個 <p> 元素。
:only-of-type	p:only-of-type	選擇作為其父的唯一 <p> 元素的每個 <p> 元素。
:only-child	p:only-child	選擇作為其父的唯一子元素的 <p> 元素。
:optional	input:optional	選擇不帶 “required” 屬性的 <input> 元素。
:out-of-range	input:out-of-range	選擇值在指定范圍之外的 <input> 元素。
:read-only	input:read-only	選擇指定了 “readonly” 屬性的 <input> 元素。
:read-write	input:read-write	選擇不帶 “readonly” 屬性的 <input> 元素。
:required	input:required	選擇指定了 “required” 屬性的 <input> 元素。
:root	root	選擇元素的根元素。
:target	#news:target	選擇當(dāng)前活動的 #news 元素（單擊包含該錨名稱的 URL）。
:valid	input:valid	選擇所有具有有效值的 <input> 元素。
:visited	a:visited	選擇所有已訪問的鏈接。

列表中使用偽類選擇器

偽類選擇器	含義
li:nth-child(2)	第2個 li
li:nth-child(n)	所有的li
li:nth-child(2n)	所有的第偶數(shù)個 li
li:nth-child(2n+1)	所有的第奇數(shù)個 li
li:nth-child(-n+5)	前5個 li
li:nth-last-child(-n+5)	最后5個 li
li:nth-child(7n)	選中7的倍數(shù)

n 表示 0,1,2,3,4,5,6,7,8…（當(dāng)n小于1時無效，因?yàn)閚 = 0 也是不會選中的）

表格中使用偽類選擇器

• tr:nth-child(odd)：匹配表格的第1, 3, 5行，等同于tr:nth-child(2n+1)。
• tr:nth-child(even)：匹配表格的第2, 4, 6行，等同于tr:nth-child(2n)。

• 偽類選擇器的實(shí)戰(zhàn)范例

  • 使用 :nth-child() 實(shí)現(xiàn)斑馬條紋、對齊邊緣、指定區(qū)間列表高亮、動態(tài)列表自適應(yīng)布局
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS 實(shí)現(xiàn)動態(tài)顯示隱藏（:checked 和 :target 的妙用）
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • 使用 :target 實(shí)現(xiàn)展開更多、收起、Tab選項(xiàng)卡切換https://blog.csdn.net/weixin_41192489/article/details/121969768

  • 使用 :placeholder-shown 實(shí)現(xiàn)MaterialDesign風(fēng)格的交互
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • 使用 :placeholder-shown校驗(yàn)空值、提示不能為空
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked 實(shí)現(xiàn)展開收起
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked 實(shí)現(xiàn)選項(xiàng)卡切換
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked實(shí)現(xiàn)自定義單選框、復(fù)選框、開關(guān)、標(biāo)簽復(fù)選、素材單選
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • 使用 :valid 和 :invalid 實(shí)現(xiàn)原生表單校驗(yàn)
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • 使用:required和:optional實(shí)現(xiàn)表單校驗(yàn)提示文字
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within 實(shí)現(xiàn)下拉列表
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • 輸入框聚焦時，高亮前方的標(biāo)簽（見鏈接內(nèi)的方法5）
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • 鼠標(biāo)懸浮顯示放大圖片 vs 鼠標(biāo)點(diǎn)擊顯示放大圖片
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty 隱藏空元素、缺失字段智能提示
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child 實(shí)現(xiàn)多狀態(tài)的動態(tài)加載動畫
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen 實(shí)現(xiàn)點(diǎn)擊圖片全屏顯示
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  偽元素選擇器 ::

  用于選擇和樣式化元素的一部分，而非整個元素

  CSS2中偽元素采用單冒號前綴語法， CSS2.1中偽元素改用雙冒號前綴，所有支持雙冒號的瀏覽器同樣也支持舊的單冒號語法?？紤]瀏覽器兼容性的話，推薦使用舊的單冒號語法，否則建議使用新的雙冒號前綴
  

  ::before 和 ::after

  需配合content屬性一起使用，用于在元素前面和后面設(shè)置內(nèi)容，詳見
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  常用的實(shí)戰(zhàn)范例：

  • 元素前后添加圖標(biāo)（::before 和 ::after 的妙用）
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • css 巧用 ::after 和 ::before 實(shí)現(xiàn)豎排分類導(dǎo)航
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • css 巧用 ::after 實(shí)現(xiàn) tab 切換動效
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter 首字母

  <p>很久很久以前</p>
  <p>Long long ago</p>
  

  p::first-letter {font-size: 2em;color: red;
  }
  

  

  ::first-line 第一行

    <div style="width: 120px"><p>很久很久以前，有一個白發(fā)蒼蒼的老人</p></div>
  

  p::first-line {color: red;
  }
  

  

  ::selection 鼠標(biāo)拖拽選中的區(qū)域

  <p>很久很久以前，有一個白發(fā)蒼蒼的老人</p>
  

  p::selection {color: red;background-color: yellow;
  }
  

  

  ::placeholder 文字占位符

  <input placeholder="請輸入" />
  

  /* input 不寫，則會選中頁面所有元素的占位符 */
  input::placeholder {color: red;
  }
  

  

  關(guān)系選擇器

  通過元素間的關(guān)系選中元素

  子代選擇器 >

  標(biāo)簽內(nèi)包裹的第一層標(biāo)簽是它的子代

  <div><p>我是div的兒子</p>
  </div>
  

  div>p{color:red;
  }
  

  后代選擇器 空格

  標(biāo)簽內(nèi)的所有標(biāo)簽都是它的后代

    <div class="parent"><p class="red">我是子代（屬于后代）</p><p>我是子代（屬于后代，但沒有 .red）</p><div><div class="red">我是孫代（也屬于后代）</div></div></div>
  

  /* 所有屬于.parent元素內(nèi)部的.red元素都將被染成紅色。*/
  .parent .red {color: red;
  }
  

  

  兄弟選擇器 ~

  選中同一個父元素下，在指定元素之后的所有同級元素，所以嚴(yán)格講，應(yīng)該叫 后面兄弟選擇器

  <div><button>按鈕1(不會變紅)</button><p>段落</p><button>按鈕2（會變紅）</button>
  </div>
  

  p ~ button {color: red;
  }
  

  

  CSS 沒有 前面兄弟選擇器 ，可以參考下方鏈接模擬實(shí)現(xiàn)
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  相鄰兄弟選擇器 +

  選中緊跟在一個元素之后的下一個元素

    <div class="parent"><p>段落</p><button>按鈕1</button><button>按鈕2</button></div>
  

  p + button {color: red;
  }
  

  

  交集選擇器

  選中頁面中同時符合多個選擇器的元素

  • 選擇器之間沒有空格（有空格就是后代選擇器）
  • 如果存在標(biāo)簽選擇器，標(biāo)簽選擇器必須放在前面

      <p class="red">很久很久以前1</p><p>很久很久以前2</p>
  

  /* 選中 p 標(biāo)簽中class值含 red 的元素 */
  p.red {color: red;
  }
  

  

  并集選擇器 ,

  多個選擇器中，只要滿足其中一個，就會被選中

  • 多個選擇器之間用 , 隔開

   <p class="error">報(bào)錯信息</p><p class="important">重要信息</p><p>其他信息</p>
  

  .error,
  .important {color: red;
  }