簡(jiǎn)介

1 .不僅僅可以根據(jù)文檔DOM樹中的內(nèi)容對(duì)元素應(yīng)用樣式,還允許你根據(jù)比如像導(dǎo)航歷史這樣的外部因素來(lái)應(yīng)用樣式

全部偽類集合

1 .active:鼠標(biāo)按下和松開的這一段時(shí)間,任意元素好像都可以.這里的效果應(yīng)該比hover的在深一點(diǎn).一般用在a,button元素上.拖拽的元素也可以使用這個(gè)..為了生效,是有排序的lvha,這個(gè)要放在最后面
2 .visited:顯示用戶已經(jīng)訪問過的鏈接.出于隱私,這里選擇器可以修改的樣式非常有限

1 .但是實(shí)際這個(gè)優(yōu)先級(jí)特別高.沒訪問也是這個(gè)顏色,會(huì)覆蓋正常的a{color:red}這種樣式的
2 .:link — :visited — :hover — :active 要按照這個(gè)順序設(shè)置
3 .可以被修改的屬性:color,background-color,border-color,column-rule-color,outline-color.基本是一些顏色,別的都不行
4 .動(dòng)畫的時(shí)候可以操作的SVG的fill,stroke屬性
5 .getComputedStyle方法只會(huì)返回非訪問的顏色.而不是這些會(huì)改變的顏色

3 .hover:鼠標(biāo)懸浮上去.
4 .link:指向所有沒有被訪問的鏈接.要注意和前面的關(guān)系.這種最后實(shí)在效果無(wú)法實(shí)現(xiàn),可以上js了
5 .any-link:選擇到一個(gè)有鏈接的元素,不管是否被訪問,也就是匹配每一個(gè)href屬性的<a>,<area>,<link>.也會(huì)匹配到所有的:visited,link.
6 .checked:任何被選中的元素,radio,checkbox,select的option(這個(gè)竟然也可以)
7 .default:匹配到默認(rèn)選中的元素.radio,checkbox,select的option(這個(gè)竟然也可以).允許多個(gè)選擇的分組元素也可以具有多個(gè)默認(rèn)值，即，它們可以具有最初選擇的多個(gè)項(xiàng)目。在這種情況下，所有默認(rèn)值都使用 :default 偽類表示。例如，您可以在一組復(fù)選框之間設(shè)置默認(rèn)復(fù)選框
8 .defined:任何已定義的元素。這包括任何瀏覽器內(nèi)置的標(biāo)準(zhǔn)元素以及已成功定義的自定義元素.比如以下操作

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(divElem);
  }
})
//這個(gè)主要是用來(lái)你有一個(gè)復(fù)雜的自定義元素需要一段時(shí)間才能加載到頁(yè)面中時(shí)非常有用 —— 你可能想要隱藏元素的實(shí)例直到定義完成為止，這樣你就不會(huì)在頁(yè)面上出現(xiàn)一些難看的元素

//但是這個(gè)一般不是都有l(wèi)oading么

9 .disabled:示任何被禁用的元素。如果一個(gè)元素不能被激活（如選擇、點(diǎn)擊或接受文本輸入）或獲取焦點(diǎn)，則該元素處于被禁用狀態(tài)。元素還有一個(gè)啟用狀態(tài)（enabled state），在啟用狀態(tài)下，元素可以被激活或獲取焦點(diǎn)。
9.1 enabled:表示任何被啟用的（enabled）元素。如果一個(gè)元素能夠被激活（如選擇、點(diǎn)擊或接受文本輸入），或者能夠獲取焦點(diǎn)，則該元素是啟用的。元素也有一個(gè)禁用的狀態(tài)（disabled state），在被禁用時(shí)，元素不能被激活或獲取焦點(diǎn).，當(dāng)文本輸入框處于啟用狀態(tài)時(shí)
10 .empty:沒有子元素的元素。子元素只可以是元素節(jié)點(diǎn)或文本（包括空格）。注釋或處理指令都不會(huì)產(chǎn)生影響.也就是里面有空格不行,有其它元素不行.可以允許有注釋
11 .first:打印文檔的時(shí)候,第一頁(yè)的樣式.能改的css屬性極其有限.

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

12 . first-child:一組元素中的第一個(gè).一組p里面的第一個(gè),ul里面的第一個(gè)li.不過first和first-child差的還停多的. 匹配的是某父元素的第一個(gè)子元素，可以說(shuō)是結(jié)構(gòu)上的第一個(gè)子元素

image.png

p:first-child  匹配到的是p元素,因?yàn)閜元素是div的第一個(gè)子元素；

h1:first-child  匹配不到任何元素，因?yàn)樵谶@里h1是div的第二個(gè)子元素，而不是第一個(gè)；

span:first-child  匹配不到任何元素，因?yàn)樵谶@里兩個(gè)span元素都不是div的第一個(gè)子元素；

13 .first-of-type表示一組兄弟元素中其類型的第一個(gè)元素。 匹配的是某父元素下相同類型子元素中的第一個(gè)

p:first-of-type  匹配到的是p元素,因?yàn)閜是div的所有類型為p的子元素中的第一個(gè)；

h1:first-of-type  匹配到的是h1元素，因?yàn)閔1是div的所有類型為h1的子元素中的第一個(gè)；

span:first-of-type  匹配到的是第三個(gè)子元素span。這里div有兩個(gè)為span的子元素，匹配到的是它們中的第一個(gè)。

13.1 .last-child,last-of-child同理.都是一樣的.

14 .focus:表示獲得焦點(diǎn)的元素（如表單輸入）。當(dāng)用戶點(diǎn)擊或觸摸元素或通過鍵盤的 “tab” 鍵選擇它時(shí)會(huì)被觸發(fā)

15 .focus-within:如果要選擇包含焦點(diǎn)元素的元素.表示一個(gè)元素獲得焦點(diǎn)，或，該元素的后代元素獲得焦點(diǎn)。換句話說(shuō)，元素自身或者它的某個(gè)后代匹配.子元素也觸發(fā)focus,父元素也會(huì)觸發(fā).方向包起來(lái).子元素匹配,父元素響應(yīng)

16 .host:選擇包含其內(nèi)部使用的CSS的shadow DOM的根元素 - 換句話說(shuō)，這允許你從其shadow DOM中選擇一個(gè)自定義元素.在shadow DOM之外使用時(shí)，這沒有任何效果。

17 .hover:用戶使用指示設(shè)備虛指一個(gè)元素（沒有激活它）的情況.注意這里的沒有激活.激活就是另一個(gè)樣式了

1 .這個(gè)樣式會(huì)被任何與鏈接相關(guān)的偽類重寫，像:link:visited, :active等。為了確保生效，:hover規(guī)則需要放在:link和:visited規(guī)則之后，但是在:active規(guī)則之前，按照LVHA的循順序聲明:link－:visited－:hover－:active。
2 .在觸摸屏上 :hover 有問題，基本不可用。不同的瀏覽器上:hover 偽類表現(xiàn)不同。 可能從不會(huì)觸發(fā)；或者在觸摸某元素后觸發(fā)了一小會(huì)兒；或者總是觸發(fā)即使用戶不在觸摸了，直到用戶觸摸別的元素
3 .觸摸屏不要依賴這個(gè)樣式實(shí)現(xiàn)一些展示的操作
4 .:hover偽類可以任何偽元素上使用
//hover出現(xiàn)下拉列表
div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

18 .:indeterminate表示狀態(tài)不確定的表單元素

1 .checkbox 被js設(shè)置為:indeterminate
2 .radio表單中擁有相同 name值的所有單選按鈕都未被選中時(shí)
3 .progress元素處于不確定狀態(tài)

19 .in-range:值處于min和max之間.只有<input>元素可以

1 .該偽類僅適用于那些擁有（或可以接受）取值范圍設(shè)定的元素。若缺少此類設(shè)定，元素值就無(wú)所謂“in-range”和“out-range”

20 .invalid.表示通過驗(yàn)證的input或form元素

1 .若一組單選鈕被設(shè)定為必須選定一個(gè)，在該組中沒有按鈕被選中的情況，:invalid偽類被應(yīng)用到該組中的所有按鈕。（單選鈕組按照name屬性共享相同值。）

21 .lang(en)基于元素語(yǔ)言來(lái)匹配頁(yè)面

1 .在HTML中, 語(yǔ)言是通lang屬性,和 <meta>元素的組合來(lái)決定的, 也可能是通過協(xié)議的信息來(lái)確定（例如HTTP頭）
2 .還可以自動(dòng)切換語(yǔ)言

//根據(jù)語(yǔ)言設(shè)置樣式
https://developer.mozilla.org/zh-CN/docs/Web/CSS/quotes
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '? ' ' ?'; }
:lang(de) > q { quotes: '?' '?' '\2039' '\203A'; }
quotes 屬性設(shè)置嵌套引用（embedded quotation）的引號(hào)類型
//這個(gè)操作也有點(diǎn)騷,<q>相當(dāng)于一個(gè)占位符,然后css竟然還能用這個(gè)屬性給替換了,有一種js的感覺,模板語(yǔ)法的操作

22 .left,right:打印相關(guān).對(duì)打印文檔的左側(cè)頁(yè)設(shè)置CSS樣式

/* 設(shè)置打印時(shí)的左側(cè)文檔樣式 */
@page :left {
  margin: 2in 3in;
}
1 .能控制的css屬性極其有限.僅僅是margin,padding,border,background

23 .not用來(lái)匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類

.not(p):選中所有不是p的元素
p:not(.fancy) {
  color: green;
}選中p里面標(biāo)簽不是fancy的.
1 .不能嵌套..not(.not)這樣是不對(duì)的
2 .由于偽元素不是簡(jiǎn)單的選擇器，他們不能被當(dāng)作 :not() 中的參數(shù)，形如 :not(p::before) 這樣的選擇器將不會(huì)工作
3 .可以利用這個(gè)偽類寫一個(gè)完全沒有用處的選擇器。例如， :not(*) 匹配任何非元素的元素，因此，這個(gè)規(guī)則將永遠(yuǎn)不會(huì)被應(yīng)用
4 .提高標(biāo)簽的優(yōu)先級(jí) #foo:not(#bar) 和 #foo 會(huì)匹配相同的元素，但是前者的優(yōu)先級(jí)更高。

24 .only-child:匹配沒有兄弟節(jié)點(diǎn)的元素.只有自己一個(gè)
25 .only-of-type 代表了任意一個(gè)元素，這個(gè)元素沒有其他相同類型的兄弟元素.沒有相同的自己
26 .optional:沒有requrire的屬性的input元素,select,textarea,
27 .past:一個(gè)時(shí)間維度的偽類，它將匹配完全出現(xiàn)在匹配元素之前的任何元素
28 .placeholder-shown:輸入那個(gè)閃爍的線的顏色.這個(gè)竟然是一個(gè)實(shí)驗(yàn)性質(zhì)的api
29 .read-only:表示元素處于不可被用戶編輯的狀態(tài)

1 .不僅僅匹配到具有readonly屬性的input元素,其他不能被用戶編輯的元素都會(huì)被用戶匹配
<input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>

input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }

30 .read-write:代表一個(gè)元素(可輸入文本的input元素),可以被用戶編輯

1 .這個(gè)選擇器不僅僅選擇input元素,也會(huì)選擇所有可以被用戶編輯的元素,比如設(shè)置了contenteditable屬性的p元素
2 .這個(gè)匹配到的東西和上一個(gè)正好相反

31 .required:任意設(shè)置了required屬性的input,select,textarea元素.這個(gè)偽類對(duì)于高亮顯示在提交表單之前必須具有有效數(shù)據(jù)的字段非常有用

1 .:optional偽類選中"可選的"表單字段,除了加了disabled屬性的列表都會(huì)被選到

32 .root:匹配文檔樹的根節(jié)點(diǎn),對(duì)于html來(lái)說(shuō),root表示html元素.除了優(yōu)先級(jí)更高之外,和html{}選擇器相同

1 .這個(gè)可以用來(lái)聲明全局css變量.但是這里一般都是less管理的.不用寫在這里吧

33 .:scope.作為選擇器要匹配的參考點(diǎn)的元素.

1 .在樣式表中使用,:scope等效于:root.

34 .:target.表示一個(gè)唯一的頁(yè)面元素,其id與當(dāng)前URL片段匹配

1 .url地址:http://www.example.com/index.html#section2
2 .會(huì)選到的元素
<section id="section2">Example</section>
3 .這個(gè)感覺僅僅是分享鏈接,新頁(yè)面打開的時(shí)候focus的時(shí)候有點(diǎn)用

35 .target-within:沒有任何瀏覽器支持

36 .user-invalid:表示任何經(jīng)過驗(yàn)證的表單元素,其值根據(jù).這個(gè)兼容性也是爆炸.就是說(shuō)這種兼容性差的css屬性,根本沒有非要扣這些,用庫(kù)實(shí)現(xiàn)類似的效果非常保險(xiǎn)

37 .valid:表示input內(nèi)容驗(yàn)證正確,和invalid效果正好相反.

38 .where: 接受選擇器列表作為他的參數(shù),將會(huì)選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素.兼容性爆炸,只有ie不支持

支持程度不好的偽類:其實(shí)這些特殊的狀態(tài),不兼容的情況,關(guān)鍵都是需要js來(lái)觸發(fā)的,所以狀態(tài)可以保存在state,自己主動(dòng)設(shè)置,而css這里的操作是捕獲.

1 .blank:選中所有為空的輸入框,input和textarea
2 .current:一個(gè)時(shí)間維度的偽類，表示當(dāng)前正在顯示的元素或元素的祖先.比如字幕相關(guān).但是字幕一般都是js實(shí)現(xiàn)
3 .dir:匹配特定文字書寫方向的元素.會(huì)匹配到繼承的元素.如果一個(gè)元素是auto,也是可以匹配到.:dir()會(huì)匹配經(jīng)過客戶端計(jì)算后的屬性, 不管是繼承的dir值還是dir值為auto的.但是[dir=ltr]不會(huì),僅僅會(huì)匹配到有的
4 .fullscreen:全屏的時(shí)候操作.
5 .future:是一個(gè)時(shí)間維度的偽類，它將匹配完全出現(xiàn)在匹配元素之后的任何元素
6 .focus-visible:當(dāng)元素匹配:focus偽類并且客戶端(UA)的啟發(fā)式引擎決定焦點(diǎn)應(yīng)當(dāng)可見(在這種情況下很多瀏覽器默認(rèn)顯示“焦點(diǎn)框”。)時(shí)，**:focus-visible **偽類將生效.這個(gè)選擇器可以有效地根據(jù)用戶的輸入方式(鼠標(biāo) vs 鍵盤)展示不同形式的焦點(diǎn)。

image.png

1 .在一個(gè)input或者其他元素被focus,鼠標(biāo)和鍵盤觸發(fā)是不同的
2 .在input里面,鍵盤focus會(huì)選中里面全部?jī)?nèi)容,鼠標(biāo)的話,僅僅會(huì)有個(gè)

7 .has:沒有任何瀏覽器支持
8 .host-content():從來(lái)沒見過
9 .is:函數(shù)將選擇器列表作為參數(shù)，并選擇該列表中任意一個(gè)選擇器可以選擇的元素

//以下兩種寫法等價(jià)
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 以上內(nèi)容相當(dāng)于以下內(nèi)容 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

10 .local-link.指向同一文檔的鏈接。因此，作為超鏈接的源錨的元素，其目標(biāo)的絕對(duì) URL 與元素自己的文檔 URL 匹配

nth-這種集合

1 .nth-child:選中所有兄弟元素,然后在括號(hào)里面進(jìn)行篩選.有當(dāng)前元素的兄弟元素，然后按照位置先后順序從1開始排序，選擇的結(jié)果為CSS偽類:nth-child括號(hào)中表達(dá)式（an+b）匹配到的元素集合

1 .nth-child(2n+1)=nth-child(odd):選中所有奇數(shù)
2 .nth-child(2n)=nth-child(even):選中所有偶數(shù)
3 .nth-child(1):選中第一個(gè).和first-child一樣==nth-child(0n+1)
4 .nth-child(-n+3):選中前三個(gè)元素.n+3除了前兩個(gè),后面都選

2 .nth-last-child:和上面那個(gè)效果一樣,但是找的時(shí)候是從后往前.所以nth-last-child(-n+3):后面三個(gè)

3 .nth-last-of-type:和nth-of-type一樣:只是它從結(jié)尾處反序計(jì)數(shù)，而不是從開頭
4 .nth-of-type:具有一組兄弟節(jié)點(diǎn)的標(biāo)簽, 用 n 來(lái)篩選出在一組兄弟節(jié)點(diǎn)的位置,語(yǔ)法參數(shù)和nth-child一樣.這種怎么感覺都差不多呢
5 .nth-col:專門用來(lái)做表格的選取