【建議收藏】萬字整理，一篇文章幫你掌握 Css 選擇器

簡介直觀的 css 選擇器，可以美化我們的代碼，提高可讀性，甚至對瀏覽器的 Css 決議也有幫助，本篇文章的靈感來自于CSS Diner——一個有趣的 css 選擇器小游戲，借助下面的例子相信你一定能掌握 css 選擇器的妙用，加油～

在這里插入圖片描述

全篇文章共22個例子，分別使用了

標簽選擇器
class
id
偽元素
偽類
屬性

篇幅較長，建議收藏

閱讀指南

先貼出選擇器字典，幫助大家回憶基本的選擇器含義
閱讀示例
閱讀代碼，并完成題目（僅思考選擇器部分）
對照答案，并在評論區留下你的答案吧～

1、選擇盤子(標簽)

示例

p => 選擇所有<p>元素

代碼

選擇所有的plate標簽

<div class="table">
  <plate />
  <plate />
</div>

答案

plate

2、選擇小的那個(id)

示例

#red => 選擇id=red的標簽

代碼

選擇小的盤子

<div class="table">
  <plate />
  <plate />
  <plate id="small" />
</div>

答案

#small

3、選擇盤子中的蘋果(標簽組合)

示例

div p => 選擇所有的被 div 包裹的 p 標簽

代碼

選擇盤子中的蘋果

<div class="table">
  <bento />
  <plate>
    <apple />
  </plate>
  <apple />
</div>

答案

plate apple

4、選擇小盤子中的蘋果(id+標簽)

根據元素的id和型別組合

示例

p #small => 選擇所有的 p 標簽中 id=small 的標簽

練習

<div class="table">
  <bento />
  <plate id="small">
    <apple />
  </plate>
  <plate>
    <apple />
  </plate>
  <apple />
</div>

答案

#small apple

5、選擇小蘋果(class)

根據元素的class

示例

.warning => 選擇所有 class=warning 的標簽

練習

<div class="table">
  <apple />
  <apple class="small" />
  <plate>
    <apple class="small" />
  </plate>
  <plate />
</div>

答案

.small

6、選擇小橘子(標簽+class)

根據元素的型別+class選擇

示例

div.red => 選擇所有的 class=red 的 div 標簽

練習

<div class="table">
  <apple />
  <apple class="small" />
  <bento>
    <orange class="small" />
  </bento>
  <plate>
    <orange />
  </plate>
  <plate>
    <orange class="small" />
  </plate>
</div>

答案

orange.small

7、選擇便當中的小橘子(組合)

根據元素的型別+class組合

示例

div p.red => div 中的 class=red 的 p 標簽

練習

選擇盤子

<div class="table">
  <bento>
    <orange />
  </bento>
  <orange class="small" />
  <bento>
    <orange class="small" />
  </bento>
  <bento>
    <apple class="small" />
  </bento>
  <bento>
    <orange class="small" />
  </bento>
</div>

答案

bento orange.small

8、選擇所有盤子和便當(標簽)

根據元素的型別選擇

示例

div , p => 選擇所有的 div 和 p 標簽

練習

<div class="table">
  <pickle class="small" />
  <pickle />
  <plate>
    <pickle />
  </plate>
  <bento>
    <pickle />
  </bento>
  <plate>
    <pickle />
  </plate>
  <pickle />
  <pickle class="small" />
</div>

答案

plate, bento

9、選擇所有的元素(通配符)

示例

* => 選擇所有的標簽

練習

<div class="table">
  <plate />
  <plate />
  <orange />
  <orange />
</div>

答案

10、選擇盤子里的所有(通配符組合)

練習

<div class="table">
  <plate id="fancy">
    <orange class="small" />
  </plate>
  <plate>
    <pickle />
  </plate>
  <apple class="small" />
  <plate>
    <apple />
  </plate>
</div>

答案

plate *

11、選擇盤子旁邊的蘋果(+)

示例

div + p =>選擇所有緊跟在<div>元素之后的第一個<p>元素

練習

<div class="table">
  <bento>
    <apple class="small" />
  </bento>
  <plate />
  <apple class="small" />
  <plate />
  <apple />
  <apple class="small" />
  <apple class="small" />
</div>

答案

plate + apple

12、選擇盤子內的蘋果(>)

根據元素的型別選擇

示例

p > div => 選擇所有的p標簽內的直系div元素

練習

選擇盤子

<div class="table">
  <plate>
    <bento>
      <apple />
    </bento>
  </plate>
  <plate>
    <apple />
  </plate>
  <plate />
  <apple />
  <apple class="small" />
</div>

答案

plate > apple

13、選擇盤子內第一個的橘子(first-child)

示例

p:first-child => 指定只有當<p>元素是其父級的第一個子級的樣式，

練習

<div class="table">
  <bento />
  <plate />
  <plate>
    <orange />
    <orange />
    <orange />
  </plate>
  <pickle class="small" />
</div>

答案

orange: first-child;

14、選擇小的的蘋果和泡菜

根據元素的型別和 class 的組合，利用逗號分割

示例

a, b => 選擇所有的a標簽和b標簽
a.red => 選擇所有的class=red的a標簽

練習

<div class="table">
  <plate id="fancy">
    <apple class="small" />
  </plate>
  <plate />
  <plate>
    <orange class="small" />
    <orange />
  </plate>
  <pickle class="small" />
</div>

答案

apple.small, pickle.small

15、選擇第三個盤子

根據元素的順序選擇

示例

p:nth-child(2) => 選擇所有的p且是父級的第二個子元素

練習

<div class="table">
  <plate />
  <plate />
  <plate />
  <plate id="fancy" />
</div>

答案

plate: nth-child(3);

16、選擇盤子中的第一個蘋果

根據元素的在其父元素的位置選擇

示例

p:first-of-type => 選擇每個p元素是其父級的第一個 p 元素

練習

<div class="table">
  <orange class="small" />
  <apple />
  <apple class="small" />
  <apple />
  <apple class="small" />
  <plate>
    <orange class="small" />
    <orange />
  </plate>
</div>

答案

apple.first-of-type

17、選擇所有位置是偶數的盤子

示例

p:nth-of-type(odd) => 選擇器匹配同型別中的第奇數個同級兄弟元素，

練習

<div class="table">
  <plate />
  <plate />
  <plate />
  <plate />
  <plate id="fancy" />
  <plate />
</div>

答案

plate: nth-of-type(2n);
plate: nth-of-type(even);

18、選擇盤子中唯一的那個蘋果

示例

p:only-of-type => 選擇每個p元素是其父級的唯一p元素

練習

<div class="table">
  <plate id="fancy">
    <apple class="small" />
    <apple />
  </plate>
  <plate>
    <apple class="small" />
  </plate>
  <plate>
    <pickle />
  </plate>
</div>

答案

apple: only-of-type;

19、分別選擇蘋果和橘子中的最后一個

示例

p:last-of-type => 選擇每個p元素是其父級的最后一個 p``元素

練習

<div class="table">
  <orange class="small" />
  <orange class="small" />
  <pickle />
  <pickle />
  <apple class="small" />
  <apple class="small" />
</div>

答案

orange:last-of-type, apple:last-of-type

20、選擇空的便當

示例

p:empty => 選擇每個沒有任何子級的p元素（包括文本節點）

練習

<div class="table">
  <bento />
  <bento>
    <pickle class="small" />
  </bento>
  <plate />
  <bento />
</div>

答案

bento: empty;

21、選擇擁有屬性 for 的盤子

示例

a[href] => 選擇所有帶有 href 屬性的a元素

練習

<div class="table">
  <plate for="Sarah">
    <pickle />
  </plate>
  <plate for="Luke">
    <apple />
  </plate>
  <plate />
  <bento for="Steve">
    <orange />
  </bento>
</div>

答案

plate[for]

22、選擇的給余光的盤子

示例

[target=-blank] 選擇所有使用target="-blank"的元素

練習

<div class="table">
  <apple for="yuguang" />
  <apple for="xiaoming" />
  <apple for="xiaowang" />
</div>

答案

apple[for="yuguang"]

在這里插入圖片描述

🌈 寫在最后

感謝閱讀，希望能對你有所幫助，歡迎在評論區留言或在主頁個人介紹中添加聯系方式私聊我原創不易，「點贊」+「關注」+「收藏」謝謝支持 ?

系列回顧

CSS 基礎：選擇器的權重與優先級
CSS 基礎：簡述 CSS 盒模型
CSS 基礎：淺談 position 定位
CSS 基礎：CSS 的背景關系之 BFC
CSS 基礎：CSS 的背景關系之層疊背景關系
CSS 進階：彈性盒子 Flex
CSS 進階：網格布局 Grid

其他沉淀

Github: Js 版 LeetCode 題解
前端進階筆記
CSDN 博客匯總

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/298410.html

標籤：其他

上一篇：【演算法入門03】調整陣列順序使奇數位于偶數前面

下一篇：HTML+CSS+JS實作 ??echarts省市區地圖城市選擇??