1. 首頁 > 生活百科 > >

CSS選擇器大全48式

生活百科


CSS選擇器大全48式

文章插圖
00、CSS選擇器CSS的選擇器分類如下圖 ， 其中最最常用的就是基礎選擇器中的三種：元素選擇器、類選擇器、id選擇器 。偽類選擇器就是元素的不同行為、狀態，或邏輯 。然后不同的選擇器組合 ， 基于不同的組合關系 ， 產生了6中組合關系選擇器 。
CSS選擇器大全48式

文章插圖
01、基礎選擇器（5）1.1、通配選擇器：*{}針對所有HTML標簽全部適用 ， 選擇器名=星號*（通配符） ， 一般只做初始化使用 。在 CSS3 中，星號 (*) 可以和命名空間組合使用，如 ns|*{} 。
/* 通用選擇器，針對所有標簽 */* {color: black;font-size: 15px;box-sizing: border-box; margin: 0px; padding: 0px;font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微軟雅黑", STXihei, "華文細黑", Heiti, "黑體", SimSun, "宋體", sans-serif;}1.2、元素選擇器：元素名{}用元素名稱作為選擇器名稱 ， 如p、h1、div、img等，對作用域內所有該標簽元素生效，所以常用來描述某一元素的共性 。
hr {margin: 32px 5px;}h1 {background-color: lightblue;text-indent: 0.5em;}1.3、類選擇器：.類名{}定義時前面加點.類名，在標簽的屬性“class”使用該樣式，這應該算是最常用的選擇器了 。
/* 類名class選擇器 */.particle{font-size: 18px;font-family: 楷體;}.pindent{text-indent: 2em;}<p class="particle pindent">一段文字內容-section</p>類選擇器可以給所有需要的元素使用 ， 可同時給多個元素使用，應用廣泛 。
  • 類名字母開頭（小寫），不能以數字開頭 。
  • 同一個標簽可以用多個類選擇器，空格隔開 ?；诖?nbsp;， 一般會將樣式抽象、分類為多個類樣式，便于復用 。
1.4、id選擇器：#id{}用標簽的id作為選擇器名稱 ， 加井號“#”，針對作用域內指定id的標簽生效，所以只能使用一次 。
  • ID是標簽的唯一標識，不能重復 。如果id重復，樣式其實是會生效的，但查找元素（document.getElementById(id)）只會返回第一個 。
  • ID字母開頭（小寫），不能以數字開頭 。
/* id選擇器 */#a1{color:blueviolet;font-size: 16px;text-decoration-line:underline ;}1.5、屬性選擇器：[屬性=value]{}元素都有屬性，屬性選擇器是在其他選擇器的基礎上加上屬性的篩??，用来啥挕有特定始g?、或始g災檔腦?，css3特性 。這里的屬性值匹配是大小寫敏感的，結尾加上字符i（li[title*= "a" i]），則會忽略大小寫敏感 。
屬性選擇器示例描述[attr]li[title] .cli[title]包含屬性 ， 篩選li元素且有屬性title的元素[attr=value]li[title="a"]包含屬性+值相等，篩選li元素+title屬性，且值為“a”的元素[attr^=value]li[title^= "a"]屬性值開頭字符：開頭字符匹配[attr$=value]li[title$= "a"]屬性值結尾字符：結尾字符匹配[attr*=value]li[title*= "a"]屬性值包含字符：包含字符匹配[attr~=value]li[title~="a"]包含屬性-值包含（完整單詞），注意是值包含（如多個樣式名，空格隔開的多個值），不是字符匹配包含 ， 空格隔開的字符也算 。[attr|=value]li[title|="a"]包含屬性-值開頭（完整單詞），同上，屬性值是a ， 或開始為a且后面跟連字符-（中劃線）<style>li[title]{color: red;}li[title="a"]{font-weight: bold;}li[title~="a"]{text-decoration: underline;}li[title|="a"]{text-indent: 2em;}li[title^= "a"]{text-shadow: 2px 2px 3px black;}li[title$= "a"]{background: center url(../res/bimg.jpg);}li[title*= "a"]{background-color: azure;}.cli[title]{font-style: italic;}</style><ul><li title="a">item1：a</li><li title="a b">item2：a b</li><li title="c a b">item2</li><li title="a-b" class="cli">item4：a-b</li><li title="abc" class="cli">item5：abc</li><li title="cab" class="cli">item6：cab</li><li title="cba" class="cli">item7：cba</li><li title="cbA1" class="cli">item8：cbA1</li></ul>
CSS選擇器大全48式

文章插圖
02、偽類選擇器（43）2.1、偽類選擇器:偽類是選擇器的一種 ， 用于選擇處于特定狀態的元素 。比如第一個元素、最后一個、奇數序列，或者是當鼠標指針懸浮時的狀態 。

推薦閱讀