css選擇器

2024-04-27 15:09:53

字體：大中小

來源：轉載

供稿：網友

CSS選擇器分為以下幾類：元素選擇器、關系選擇器、屬性選擇器、偽類選擇器、偽元素選擇器，類選擇器，ID選擇器

一.元素選擇器

最常見的css選擇器就是元素選擇器，平時構建html頁面用到的p、h1、div等元素選擇器

p{ font-size:15px;}div{ color:#e0e0e0;}

這里寫圖片描述

二.關系選擇器

關系選擇器包括后代選擇器，子元素選擇器，相鄰兄弟選擇器 1.后代選擇器

//意味著被class名為part1的元素包裹著的所有span元素的字體顏色設置為紅色.part1 span{ color:red;}<div class="part1"> sdsdsdsd <span>make a world</span> <div> 我不會變紅 <span>i want to make a world</span> </div></div><div> sdsdsdsd <span>make a world</span> <div> 我不會變紅 <span>i want to make a world</span> </div></div>

這里寫圖片描述 2.子元素選擇器

//只有class名為part1的子元素span標簽的字體顏色被設置.part1 span{ color:red;}<div class="part1"> sdsdsdsd <span>make a world</span> <div> 我不會變紅 <span>i want to make a world</span> </div></div><div> sdsdsdsd <span>make a world</span> <div> 我不會變紅 <span>i want to make a world</span> </div></div>

這里寫圖片描述 3.相鄰兄弟選擇器

//h1的相鄰元素上邊距設置為5pxh1 + p { margin-top:50px;}<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p></body>

這里寫圖片描述

三.屬性選擇器

這里寫圖片描述注：圖片來自w3cschool官網，詳細內容如下：http://www.survivalescaperooms.com.cn/css/css_syntax_attribute_selector.asp

這里寫圖片描述

四.偽類選擇器和偽元素選擇器

偽類選擇器和偽元素選擇器

五.選擇器優先級

優先級由上往下！important（權重：10000）直接在標簽內設置樣式（權重：1000） <span style="color:red;"></span> ID選擇器（權重：0100）類選擇器和偽類選擇器（權重：0010）元素選擇器和偽元素選擇器（權重：0001）通配選擇器*對特殊性沒有貢獻（權重：0000）

子元素選擇器優先級（權重+權重）.firstDiv p{}的值為（10+1=11）

上一篇：理解vue實現原理，實現一個簡單的Vue框架

下一篇：兩種方式安裝sublime插件 mac