id選擇器
先看看class屬性和id屬性的區(qū)別吧。
id
id用于定義唯一的標(biāo)識(shí)符，它是一個(gè)全局屬性，在整個(gè)HTML文檔中它的值必須是唯一的。它的用途是當(dāng)進(jìn)行鏈接時(shí)標(biāo)識(shí)元素的（使用片段時(shí)的標(biāo)識(shí)符），比如使用腳本，或者樣式（CSS）。
這個(gè)屬性的值是一個(gè)不能讀懂的字符串：這意味著網(wǎng)頁(yè)作者不能用他來(lái)傳遞任何信息，比如語(yǔ)義，不能從該字符串中得到（譯者認(rèn)為這句話的意思是，id屬性的值只是用來(lái)標(biāo)識(shí)一個(gè)元素的字符串，該字符串沒(méi)有實(shí)際的語(yǔ)義，即不能從中知道元素的功能或內(nèi)容等信息）。
這個(gè)屬性的值必須不能包含空格，對(duì)于包含空格的屬性值瀏覽器會(huì)認(rèn)為是不符合標(biāo)準(zhǔn)的。相比之下，class屬性允許包含用空格隔開(kāi)的多個(gè)值，而元素的id只能有一個(gè)單一的標(biāo)識(shí)符。注意某個(gè)元素可能有幾個(gè)id，但是其他的id應(yīng)該是通過(guò)別的方法定義的，比如可以通過(guò)DOM接口操作元素的腳本。
class
全局屬性class，是一個(gè)以空格分隔的class屬性列表?？稍试SCSS和Javascript對(duì)Class屬性進(jìn)行選擇，通過(guò)class選擇器或者類(lèi)似DOM方法的方程來(lái)選取文檔中某一類(lèi)特定的元素。document.getElementsByClassName
.
id選擇器
在一個(gè)HTML文檔中,CSS ID 選擇器會(huì)根據(jù)該元素的ID屬性中的內(nèi)容匹配元素,元素ID屬性名必須與選擇器中的ID屬性名完全匹配，此條樣式聲明才會(huì)生效。
class選擇器
類(lèi)選擇器，使用.name定義（name為類(lèi)名，可任意取名），使用class="name"調(diào)用，一個(gè)標(biāo)簽可以有多個(gè)類(lèi)且同一個(gè)類(lèi)可以用到不同的標(biāo)簽上，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)；
css常見(jiàn)選擇器
Type selectors elementname 類(lèi)型選擇器
Class selectors .classname 類(lèi)選擇器
ID selectors #idname id選擇器
Universal selectors * ns|* | 通配符
Attribute selectors [attr=value] 屬性選擇器
Combinators組合子
Adjacent sibling selectors A + B （:first-of-type CSS 偽類(lèi)匹配子元素中新的種類(lèi)的元素（第一次出現(xiàn)叫做新））
General sibling selectors A ~ B（在使用 ~ 連接兩個(gè)元素時(shí),它會(huì)匹配第二個(gè)元素,條件是它必須跟(不一定是緊跟)在第一個(gè)元素之后,且他們都有一個(gè)共同的父元素 .）
Child selectors A > B（當(dāng)使用 > 選擇符分隔兩個(gè)元素時(shí),它只會(huì)匹配那些作為第一個(gè)元素的直接后代(子元素)的第二元素. ）
Descendant selectors A B（當(dāng)使用 ?
選擇符 (這里代表一個(gè)空格,更確切的說(shuō)是一個(gè)或多個(gè)的空白字符) 連接兩個(gè)元素時(shí)使得該選擇器可以只匹配那些由第一個(gè)元素作為祖先元素的所有第二個(gè)元素(后代元素) . 后代選擇器與 子選擇器 很相似, 但是后代選擇器不需要相匹配元素之間要有嚴(yán)格的父子關(guān)系.)
Pseudo-elements(偽元素) 偽元素添加到選擇器，但不是描述特殊狀態(tài)，它們?cè)试S您為元素的某些部分設(shè)置樣式。
Pseudo-classes(偽類(lèi)）SS偽類(lèi)是添加到選擇器的關(guān)鍵字，指定要選擇的元素的特殊狀態(tài)。
css優(yōu)先級(jí)與復(fù)雜場(chǎng)景的計(jì)算方式
優(yōu)先級(jí),復(fù)雜場(chǎng)景的計(jì)算方式
這里作為補(bǔ)充：
-
"與"組合子
image.png
我在mdn上沒(méi)有找到相關(guān)的信息，但是確實(shí)有這樣的例子，感謝老師的幫助。暫且稱之為“與”選擇器吧。
-
直接選擇和繼承樣式
image.png
這里，沒(méi)有翻譯，而且例子也有問(wèn)題，我就大概說(shuō)明一下吧，繼承屬性是會(huì)被直接選擇的屬性所替代的。
- 復(fù)雜場(chǎng)景的權(quán)重計(jì)算
1.類(lèi)型選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）(假設(shè)=a）
2.類(lèi)選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如, [type="radio"]），偽類(lèi)（pseudo-classes）（例如, :hover）（假設(shè)=b）
3.ID選擇器（例如, #example）（假設(shè)=c）
數(shù)值越大優(yōu)先級(jí)越高
計(jì)算方法如下:
注意：相同類(lèi)型的簡(jiǎn)單選擇器是允許重復(fù)的而且，會(huì)增加對(duì)應(yīng)的權(quán)重
狀態(tài)偽類(lèi)的覆蓋
正確的覆蓋順序：link、a:visited、a:hover、a:active (其中，link和visited可以互換)
1.鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”同時(shí)擁有a:link、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義；
2.鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”同時(shí)擁有a:visited、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義（hover也可以覆蓋active和link）；
實(shí)例：
1 .#header{}：匹配Id=header的元素
- .header{}:匹配類(lèi)class=header的元素
- .header .logo{}：
匹配類(lèi)為header元素的后代元素中類(lèi)為logo的元素 - .header.mobile{}：
匹配類(lèi)名包含header和mobile的元素，如class = 'beader mobile' - .header p, .header h3{}：
匹配兩個(gè)類(lèi)型的元素（并集，‘或’關(guān)系），類(lèi)型1是header類(lèi)的后代p標(biāo)簽，類(lèi)型2是header類(lèi)的后代h3標(biāo)簽
6.#header .nav>li{}：
匹配id為header的后代中，類(lèi)名為nav的直接子元素中，的li標(biāo)簽
7.#header a:hover{}：
匹配id為header的后代a標(biāo)簽在hover狀態(tài)（鼠標(biāo)懸停其上）下的樣式
8.#header .logo~p{}：
匹配id為header的后代中，類(lèi)名為logo的元素之后的同級(jí)元素中，的p標(biāo)簽
9.#header input[type="text"]{}
id為header的后代中，input標(biāo)簽中，屬性type的值為"text"的元素集合
常見(jiàn)選擇器
E:first-child：匹配元素E的第一個(gè)子元素
E:nth-child：匹配元素E的第n個(gè)子元素
E:enabled和E:disabled：匹配元素E的狀態(tài)為可用/不可用
E:checked和E:selection：匹配元素E的狀態(tài)為單選框選中/復(fù)選框選中
a:link：未被點(diǎn)擊的鏈接
a:visited：已被點(diǎn)擊的鏈接
a:hover：鼠標(biāo)懸停其上的鏈接
a:active：鼠標(biāo)已經(jīng)按下，但沒(méi)有釋放的鏈接
div:first-child和div:first-of-type的作用和區(qū)別
div:first-child：父元素的第一個(gè)子元素且必須符合指定類(lèi)型（為div）
div:first-of-type：父元素中的第一個(gè)div元素
區(qū)別：如
<body>
<p>title</p>
<div>div1</div>
<div>div2</div>
</body>
1.div:first-child指定必須是第一個(gè)元素的div標(biāo)簽，所以無(wú)效果
2.div:first-of-type指定第一個(gè)div標(biāo)簽，所以是指div1所在的div標(biāo)簽樣式
分析
原因：
- item1:first-child{ color: red;}
指定父元素中第一個(gè)類(lèi)名為item1的元素的字體顏色為紅色 - item1:first-of-type{ background: blue;}
父元素中每一類(lèi)元素的第一個(gè)類(lèi)名為item1的元素的背景色為藍(lán)色，
（即現(xiàn)將div中的子元素分為p、h3兩類(lèi)標(biāo)簽，每一類(lèi)取第一個(gè)類(lèi)名為item1的元素，最終：內(nèi)容為aa的p標(biāo)簽和內(nèi)容為bb的h3標(biāo)簽被選中）
