COVID-19【新冠病毒、武漢肺炎】即時資訊:全球疫情台灣疫情
目前位置: 首頁 > HTML5、CSS3、其他 > 30個你必須知道的CSS選擇器

30個你必須知道的CSS選擇器 超大 稍大 微大

發表於: 2020-12-23 最後更新: 現在時間:2021-04-11 05:59:23
* {.....}
星號選擇器會選取頁面上所有的元素。 
#container * {.....}
這樣會選取 id="container" 的所有子對象。
如果可能的話,盡可能不要使用這兩個方法。
#container {.....}
#(id)選擇器是唯一的,不允許網頁中出現同名(id)選擇器
.container {.....}
.(class)選擇器,允許網頁中同名的(class)選擇器多次出現或與(id)選擇器同時使用於同一元素
a {.....}
ul {.....}
input {.....}
前面不加任何符號的是標籤選擇器,會套用樣式於所有符合的HTML標籤
li a {.....}
這個是子對象選擇器,會選取所有li標籤底下的所有連結
a:link {.....}
a:visted {.....}
使用 :link 偽類來選擇所有還沒有點擊過的超連結標籤
使用 :visited 偽類來選擇所有已經被點擊過的超連結標籤
ul + p {.....}
相鄰兄弟選擇器,只選擇與UL同級且相鄰的第一個P標籤
div.demo ~ p {.....}
和相鄰兄弟選擇器非常相似,他會選擇與ID為demo的DIV標籤同級且相鄰的所有P標籤
div#container > ul {.....}
選擇ID為container的DIV標籤內的UL元素
a[title] {.....}
屬性選擇器 ,設定a標籤內含有title屬性的樣式
a[href="https://www.we-shop.net"] {.....}
屬性選擇器 ,設定a標籤內屬性href的值為https://www.we-shop.net的樣式
a[href*="shop"] {.....}
模糊屬性選擇器 ,設定只要a標籤內屬性href的值包含shop即可套用樣式
a[href^="http"] {.....}
開頭屬性選擇器 ,設定只要a標籤內屬性href的值開頭為http即可套用樣式
a[href$=".jpg"] {.....}
尾部屬性選擇器 ,設定只要a標籤內屬性href的值尾部為.jpg即可套用樣式
a[data-*="image"] {.....}
自訂屬性選擇器 ,設定只要a標籤內自訂屬性的值包含image即可套用樣式
h1,h2,h3,h4,h5,h6 {.....}
同時設定多個元素,用半形逗號分隔
input[type=radio]:checked, input[type=checkbox]:checked {.....}
偽類選擇器,用來選擇已被選取的單選框或複選框
.demo:before {content : "";}
.demo:after {content : "...";}
偽類選擇器,指定的元素前(before)後(after)添加內容
a:hover {border-bottom : 1px solid black ;}
border-bottom: 1px solid black;比 text-decoration: underline;兼容性更好
div:not(#container) {.....}
偽類選擇器,選擇除了id是container的所有的div標籤
p::first-line {.....}第一行
p::first-letter {.....}第一個字
偽元素選擇器,給每個段落的第一行或第一個字添加樣式
li:nth-last-child(2) {.....}
給倒數第2個li元素添加樣式
ul:nth-of-type(3) {.....}
給第3個ul元素添加樣式(包含內部li)
ul:nth-last-of-type(2) {.....}
給倒數第2個ul元素添加樣式(包含內部li)
ul li:first-child {.....}
給每個ul裡的第1個li元素添加樣式
ul li:last-child {.....}
給每個ul裡的最後一個li元素添加樣式
ul li:last-child {.....}
給每個ul裡的最後一個li元素添加樣式
div p:only-child {.....}
給只包含1個p元素的div標籤添加樣式,多餘1個則被忽略
li:only-of-type {....}
給只包含1個li標籤的父元素添加樣式,多餘1個則被忽略
li:only-of-type {....}
給只包含1個li標籤的父元素添加樣式,多餘1個則被忽略
li:first-of-type {color: red;}
給包含多個li標籤的第一個相同li標籤的父元素添加樣式
<div>
    <p> My paragraph here. </p>
    <ul>
       <li> List Item 1 </li>
       <li> List Item 2 </li>
    </ul>
 
    <ul>
       <li> List Item 3 </li>
       <li> List Item 4 </li>
    </ul>  
</div>
使用上面的代碼會選擇 List Item 1 和 List Item 3,那怎樣才能選到 List Item 2 呢?  
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2021-04-11 05:59:23