CSS選擇器學習筆記（BETA 1.1）

新版本的Edge支持度都比較好届吁，IE不行车吹，CSS選擇器原文鏈接 （加上了一小部分自己的理解尚镰，以及原文不說人話的文字描述的改寫鼻种，基本是看過案例或者用過歧强，有待補充）

CSS使用的一部分想法澜薄，className在大規(guī)模項目中是非常痛苦的存在（本人起名廢），所以推薦使用集中類型的屬性設(shè)定之后多次應用摊册，可以根據(jù)自己需要總結(jié)一些常用class之后直接調(diào)用表悬，不需要單獨寫∩ッ遥↓
<!DOCTYPE html>
<html>
<head>
<style> 
 .egText { 
   font-size: 14px;
   font-weight: bolder;
 }
 .egColor {
   color: #409EFF;
 }
</style>
</head>
<body>

<div>
   <span class="egText egColor ">A div element.</span>
   ...
</div>

<div class="egText  egColor ">B div element.</div>

</body>
</html>

單獨類別（基礎(chǔ)中的基礎(chǔ)）

* 通配符（所有元素）
.class 所有 class = “className” 的元素
#id 所有 id = “id” 的元素
element 選擇所有 element 比如p

互相作用關(guān)系

elementui的標簽基本會帶class屬性與 className 性質(zhì)等同
#id蟆沫、.class、element 三者在實際使用中的用法相同

element1,element2 選擇 所有element1 和 element2 元素（逗號為并列選擇）
element1 element2 選擇 element1內(nèi) 的 所有element2 元素（空格為子級選擇）

<!DOCTYPE html>
<html>
<head>
<style> 
  .attrA .attrB { 
    color:#ff0000;
  }
</style>
</head>
<body>

<div #id="title" class="attrA">
    <span #id="content" class="attrB">A div element.</span><!-- 變化 -->
</div>
<div class="attrA attrB">B div element.</div>

</body>
</html>

↑其中 .attrA .attrB { color:#ff0000; } 等同于 div span { color:#ff0000; } 等同于 #title #content { color:#ff0000; }
唯一性最強的是#id系列温治，慎用element系列（殺傷范圍過大）

element1element2 選擇 element1 和 element2 同時存在的元素（中間沒有空格饭庞，需要同時滿足兩個class都存在，常用來指向一個元素）

<!DOCTYPE html>
<html>
<head>
<style> 
  .attrA.attrB {
    color:#ff0000;
  }
</style>
</head>
<body>

<div class="attrA">
    <span class="attrB">A div element.</span>
</div>
<div class="attrA attrB">B div element.</div> <!-- 變化 -->

</body>
</html>

element1>element2 選擇 所有父級是 element1 的 element2
element1+element2 選擇 element1 下 的 第一個element2
element1~element2 選擇 element1 之后的每一個 element2 元素（在線代碼測試時熬荆，發(fā)現(xiàn)ul套了一層div就不認識了舟山，應該是同一層的兄弟關(guān)系才起作用）

<!DOCTYPE html>
<html>
<head>
<style> 
  p~ul {
    background:#ff0000;
  }
</style>
</head>
<body>

<div>A div element.</div>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>The first paragraph.</p>
<!--此后的ul均為選中，其他不會被選中-->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>Another list</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

帶判斷條件的 [ ]

[attribute] 所有帶 attribute 屬性的元素
a[target] { background-color:yellow; }
[attribute=value] 所有 attribute = value 的元素
a[target = _blank] { background-color:yellow; }
[attribute~=value] 選擇 attribute 含 value 的所有元素
[title~=flower] { background-color:yellow; }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
  [title~=flower] {
    border:5px solid yellow;
  }
</style>
</head>

<body>
  <p>
    圖片的 title 屬性中如果帶有 "flower" 單詞卤恳，則會設(shè)置為黃色邊框累盗。
  </p>
  <img src="klematis.jpg" title="klematis flower" width="150" height="113" /> <!-- 變色 -->
  <img src="img_flwr.gif" title="flowers" width="224" height="162" /> <!--  變色 -->
  <img src="landscape.jpg" title="landscape" width="160" height="120" />
  <p>
    <b>注意:</b>
    如果 [<i>attribute</i>~=<i>value</i>] 
    要在 IE8 及其更早版本下起作用， DOCTYPE 是必須聲明的突琳。
  </p>
</body>
</html>

[attribute|=language] 選擇 attribute屬性等于language或是以它為開頭 的所有屬性
[lang|=en] ( [title|="flower"] )

<!DOCTYPE html>
<html>
<head>
<style>
  [lang|=en] {
    background:yellow;
  }
</style>
</head>

<body>
  <p lang="en">Hello!</p> <!--變色-->
  <p lang="en-us">Hi!</p> <!--變色-->
  <p lang="en-gb">Ello!</p> <!--變色-->
  <p lang="us">Hi!</p>
  <p lang="no">Hei!</p>
  <p>
    <b>Note:</b> 
    For [<i>attribute</i>|=<i>value</i>] 
    to work in IE8 and earlier, a DOCTYPE must be declared.
  </p>
</body>
</html>

[attribute^=value] 選擇每一個 attribute 屬性的值以 value 開頭的元素
div[class^="test"] { background:#ffff00; }
[attribute$=value] 選擇每一個 attribute 屬性的值以 value 結(jié)尾的元素
div[class$="test"] { background:#ffff00; }
[attribute*=value] 選擇每一個 attribute 屬性的值包含 value 的元素
div[class*="test"] { background:#ffff00; }

偽類（定義特殊屬性）

常用若债，內(nèi)容類

:before p:before { content:"Read this: "; } 在插入圖形中會常用，以及需要添加一部分文本拆融，也可以設(shè)置開頭蠢琳，就好比劇本那種 XXX：xxxxx 在前面把 XXX 統(tǒng)一加上，也可以在前面添加一些東西
:after p:after { content:"- Remember this"; } 在插入圖形中會常用镜豹，在段尾添加一些東西都可以用傲须，與before經(jīng)常會聯(lián)合起來使用

a鏈接常用

:link 選擇所有未訪問鏈接 a:link { background-color:yellow; } 可以與:visited一起使用，作為兩類的區(qū)分趟脂，需要同一個元素才能生效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
  a:link {
    background-color:yellow;
  }
</style>
</head>
<body>
<!--單獨使用:link泰讽，點擊的時候沒發(fā)現(xiàn)原增加的背景色在點擊后有變化，添加visited之后才有效果-->
<a >runoob.com</a>
<a >Google</a>
<a >Wikipedia</a>

<p><b>注意:</b>:link選擇樣式鏈接到你還沒有去過的鏈接昔期。</p>

</body>
</html>

:visited 選擇所有訪問過的鏈接 a:visited { background-color:green; } 可以與:link一起使用已卸，作為兩類的區(qū)分，需要同一個元素才能生效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
  a:link { background-color:yellow; }
  a:visited { background-color:green; }
</style>
</head>

<body>
  <a >runoob.com</a>
  <a >百度</a>
  <a >Wikipedia</a>
  <p><b>注意:</b>:link選擇樣式鏈接到你還沒有去過的鏈接镇眷。</p>
</body>
</html>

:target 針對a鏈接的target作錨點時的選中狀態(tài)咬最，錨點對應部分會根據(jù) :target 的樣式進行渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
  :target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
  }
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>注意:</b> IE 8 以及更早版本的瀏覽器不支持 :target 選擇器.</p>

</body>
</html>

button常用

:active 選擇活動鏈接 a:active { background-color:yellow; } 點擊時當下的樣式，不持續(xù)欠动，只有點擊時有效
:hover 鼠標移到鏈接上的樣式 a:hover { background-color:yellow; }
:focus 選擇具有焦點的輸入元素 input:focus { background-color:yellow; }

針對狀態(tài)常用（比較多是針對input原生的各種狀態(tài)）

:enabled 選擇每一個已啟用的輸入元素 input[type="text"]:enabled { background:#ffff00; } （每一個 type=text 的已開啟的 input）

<form action="">
  First name: <input type="text" value="Mickey" /><br>
  Last name: <input type="text" value="Mouse" /><br>
  Country: <input type="text" disabled="disabled" value="Disneyland" /> 
  <br>
</form>

:disabled 選擇每一個禁用的輸入元素 input[type="text"]:disabled { background:#dddddd; } （針對 enabled 而用永乌，默認都是enabled）
:checked 選擇每個選中的輸入元素 input:checked { height: 50px; width: 50px; }

:out-of-range input框設(shè)定 min 和 max 后惑申，超出范圍之后的樣式修改，可與in-range同用翅雏，可單獨使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
input:out-of-range {
    border:2px solid red;
}
</style>
</head>
<body>

<h3> :out-of-range 選擇器實例演示圈驼。</h3>

<input type="number" min="5" max="10" value="17" />

<p>在input中輸入一個值 (小于 5 或者 大于 10), 查看樣式的變化。</p>

</body>
</html>

:in-range 與out-of-range對應望几，input的偽類绩脆，可以單獨生效
input:in-range { border:2px solid yellow; }
:read-write 匹配可讀及可寫的元素，與readonly相配合使用橄抹，渲染所有非readonly的內(nèi)容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
  input:read-write {
    background-color: yellow;
  }
</style>
</head>
<body>

<h3> :read-write 選擇器實例演示靴迫。</h3>

<p>普通的input元素:<br><input value="hello"></p>

<p>只讀的input元素:<br><input readonly value="hello"></p>

<p> :read-write 選擇器選取沒有設(shè)置 "readonly" 屬性的元素。</p>

</body>
</html>

:read-only 只針對擁有readonly屬性的對象進行樣式設(shè)置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
input:read-only
{
    background-color: yellow;
}
</style>
</head>
<body>

<h3> :read-only 選擇器實例演示楼誓。</h3>


<p>普通的input元素:<br><input value="hello"></p>

<p>只讀的input元素:<br><input readonly value="hello"></p>

<p> :read-write 選擇器選取沒有設(shè)置 "readonly" 屬性的元素玉锌。</p>
<p> :readonly 擇器選取設(shè)置 "readonly" 屬性的元素。</p>

</body>
</html>

:optional input沒有寫 required 的所有元素內(nèi)容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
input:optional
{
background-color: yellow;
}
</style>
</head>
<body>

<h3>:optional 選擇器演示實例疟羹。</h3>

<p>可選的 input 元素:<br><input></p>

<p>必填的 input 元素:<br><input required></p>

<p> :optional 選擇器用于表單中未設(shè)置"required" 屬性的元素主守。</p>

</body>
</html>

:required input里所有帶上 required 屬性的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
input:required
{
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :required selector.</h3>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>

<p> :required選擇器選擇表單元素有“需要”屬性.</p>

</body>
</html>

:valid 針對input的type屬性，自帶校驗不匹配則不現(xiàn)實樣式效果榄融，與 :invalid 對應参淫，可以單獨使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
input:valid
{
    background-color: yellow;
}
</style>
</head>
<body>

<h3> :valid 選擇器實例演示。</h3>

<input type="email" value="support@exampel.com" />

<p>請輸入非法 e-mail 地址愧杯，查看樣式變化涎才。</p>

</body>
</html>

:invalid 不匹配input自帶校驗規(guī)則，則會顯示樣式民效，與 :valid 對應憔维，可以單獨使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
input:invalid
{
    border:2px solid red;
}
</style>
</head>
<body>

<h3> :invalid 選擇器實例演示。</h3>

<input type="email" value="supportEmail" />

<p>請輸入合法 e-mail 地址畏邢，查看樣式變化。</p>

</body>
</html>

:default input:default { box-shadow: 0 0 1px 1px red; } 給input默認值的一個醒目點检吆，慎重使用（可用于比如radio舒萎，checkbox狀態(tài)）

<!DOCTYPE html>
<html>
<head>
<style> 
input:default {
  box-shadow: 0 0 1px 1px red;
}
</style>
</head>
<body>

<h1>The default Selector</h1>
<p>The :default selector selects the default form element in a group of related elements.</p>
<p>The "male" radio button is checked by default:</p>

<form action="">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

<p>The :default selector is not supported in Internet Explorer 11 and earlier versions.</p>

</body>
</html>

:indeterminate input:indeterminate { box-shadow: 0 0 1px 1px red; } 表不確定的狀態(tài)↓checkbox專屬（用于多選）

elementui相關(guān)表現(xiàn)參考
::placeholder::placeholder { color: red; } 直接硬控placeholder的屬性，有兼容寫法（針對edge）蹭沛，使用需謹慎

文字類常用

:first-letter 選擇第一個字母元素 p:first-letter { font-size:200%; color:#8A2BE2; } （首字母變大變色）

可用屬性：font || color || background || margin || padding || border || text-decoration || vertical-align (only if float is 'none') || text-transform || line-height || float || clear

:first-line 選擇第一行原素 p:first-line { background-color:yellow; }

可用屬性：font || color || background || word-spacing || letter-spacing || text-decoration || vertical-align || text-transform || line-height || clear

::selection 元素中被用戶選中或處于高亮狀態(tài)的部分（選擇案例中的文本會變色臂寝，高亮部分狀態(tài)變更還未知）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>

<h1>嘗試選擇本頁的一些文本</h1>

<p>這是一些文本.</p>

<div>這是div元素中的一些文本.</div>

<a  target="_blank">鏈接W3Cschool!</a>

</body>
</html>

::marker 就是給ul li ol li系列標識的一個符號專用css類名

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
}
</style>
</head>
<body>

<h1>Demo of the ::marker selector</h1>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>

前面的標點和序號變色效果圖

常用選擇類（針對子元素）

:first-of-type p:first-of-type { background:#ff0000; }（其父元素下的第一個P元素）
:last-of-type p:last-of-type { background:#ff0000; }（其父元素下的最后一個P元素）
:only-of-type p:only-of-type { background:#ff0000; }（其父元素下的唯一一個P元素）
:nth-of-type(n) p:nth-of-type(2) { background:#ff0000; }（兄弟元素，父元素下的第2個p元素）
:nth-last-of-type(n) p:nth-last-of-type(2) { background:#ff0000; }（兄弟元素摊灭，父元素下的倒數(shù)第2個p元素）
:first-child 父元素的第一個子元素（以所有子元素來計算） p:first-child { background-color:yellow; }
:last-child p:last-child { background:#ff0000; }（父元素中最后一個元素是p元素咆贬，其他元素無效）
:only-child p:only-child { background:#ff0000; }（父元素中唯一子元素的 p 元素）
:nth-child(n)p:nth-child(2) { background:#ff0000; }（父元素中的第2個子元素是p的元素，如果是其他元素排第二位則無效）
:nth-last-child(n) p:nth-last-child(2) { background:#ff0000; }（父元素中的倒數(shù)第2個子元素是p的元素帚呼，如果是其他元素則無效）
:not(selector) except :not(p) { background:#ff0000; }
:has 常用于反向選擇 div:has(p) { color:#000000; }
:is 用于多選 :is(h1, h2, h3) { color: red; } （感覺多選的方法有很多掏缎，實用性有待考究）

特殊類

:lang(language) 首先有l(wèi)ang屬性皱蹦，然后只針對語言類的起始字母為條件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
p:lang(it)
{ 
    background:yellow;
}
</style>
</head>
<body>

<p>I live in Italy.</p>
<p lang="it">Ciao bella!</p> 
<!--當lang的語言起始為it即為選中，比如lang="en"眷蜈，則lang="en"與lang="en-us"均為選中-->
<p><b>注意:</b> :lang 作用于 IE8, DOCTYPE 必須已經(jīng)聲明.</p>

</body>
</html>

:root 選擇文檔的根元素 :root { background:#ff0000; }（給整個 iframe || html 增加bgc屬性沪哺，不跟其他元素綁定）
:empty 沒有任何子級的元素，比如p內(nèi)的文字也屬于子級 p:empty { background:#ff0000; }（input這種直接就是改變酌儒，不會因為輸入而變更辜妓，簡直bgc）
:fullscreen :fullscreen { background-color: yellow; }配合F11全屏使用的特殊情況可以考慮

最后編輯于：2024.10.23 11:30:56

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市忌怎，隨后出現(xiàn)的幾起案子籍滴，更是在濱河造成了極大的恐慌，老刑警劉巖榴啸，帶你破解...
沈念sama閱讀 217,084評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件孽惰，死亡現(xiàn)場離奇詭異，居然都是意外死亡插掂，警方通過查閱死者的電腦和手機灰瞻，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,623評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來辅甥，“玉大人酝润，你說我怎么就攤上這事×” “怎么了要销？”我有些...
開封第一講書人閱讀 163,450評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長夏块。經(jīng)常有香客問我疏咐，道長，這世上最難降的妖魔是什么脐供？我笑而不...
開封第一講書人閱讀 58,322評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任浑塞，我火速辦了婚禮，結(jié)果婚禮上政己，老公的妹妹穿的比我還像新娘酌壕。我一直安慰自己，他們只是感情好歇由，可當我...
茶點故事閱讀 67,370評論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布卵牍。她就那樣靜靜地躺著，像睡著了一般沦泌。火紅的嫁衣襯著肌膚如雪糊昙。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,274評論 1贊 300
城市分裂傳說
那天谢谦，我揣著相機與錄音释牺，去河邊找鬼萝衩。笑死，一個胖子當著我的面吹牛船侧，可吹牛的內(nèi)容都是我干的欠气。我是一名探鬼主播，決...
沈念sama閱讀 40,126評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼镜撩，長吁一口氣：“原來是場噩夢啊……” “哼预柒！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起袁梗，我...
開封第一講書人閱讀 38,980評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤宜鸯，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后遮怜，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淋袖，經(jīng)...
沈念sama閱讀 45,414評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,599評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年锯梁，在試婚紗的時候發(fā)現(xiàn)自己被綠了即碗。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,773評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡陌凳，死狀恐怖剥懒，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情合敦，我是刑警寧澤初橘，帶...
沈念sama閱讀 35,470評論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站充岛，受9級特大地震影響保檐，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜崔梗，卻給世界環(huán)境...
茶點故事閱讀 41,080評論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一夜只、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧蒜魄，春花似錦盐肃、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,713評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽推盛。三九已至峦阁，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間耘成，已是汗流浹背榔昔。一陣腳步聲響...
開封第一講書人閱讀 32,852評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工驹闰，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人撒会。一個月前我還...
沈念sama閱讀 47,865評論 2贊 370
代替公主和親
正文我出身青樓嘹朗，卻偏偏與公主長得像，于是被迫代替她去往敵國和親诵肛。傳聞我的和親對象是個殘疾皇子屹培，可洞房花燭夜當晚...
茶點故事閱讀 44,689評論 2贊 354

CSS選擇器學習筆記（BETA 1.1）

單獨類別（基礎(chǔ)中的基礎(chǔ)）

互相作用關(guān)系

帶判斷條件的 [ ]

偽類（定義特殊屬性）

常用若债，內(nèi)容類

a鏈接常用

button常用

針對狀態(tài)常用（比較多是針對input原生的各種狀態(tài)）

文字類常用

常用選擇類（針對子元素）

特殊類

推薦閱讀更多精彩內(nèi)容