資訊專欄INFORMATION COLUMN
摘要：選擇器分類標(biāo)簽選擇選擇器選擇器后代選擇子代選擇相鄰選擇通配符選擇否定選擇器屬性選擇器偽類選擇器偽元素選擇器屬性選擇器選擇器描述用于選取帶有指定屬性的元素。在元素之后添加內(nèi)容選擇器匹配每個(gè)已啟用的元素大多用在表單元素上。
CSS 選擇器分類
標(biāo)簽選擇
id選擇器
class選擇器
后代選擇 （div a）
子代選擇 （div > p）
相鄰選擇 （div + p）
通配符選擇 （*）
否定選擇器 :not(.link){}
屬性選擇器
偽類選擇器
偽元素選擇器 ::before{}
CSS3屬性選擇器| 選擇器 | 描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
| [attribute l=value] | 用于選取帶有以指定值開(kāi)頭的屬性值的元素，該值必須是整個(gè)單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開(kāi)頭的每個(gè)元素。 |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個(gè)元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個(gè)元素。 |
偽類 | MDN
常用：
:hover
:focus
:after 在元素之前添加內(nèi)容,也可以用來(lái)做清除浮動(dòng)。
:before 在元素之后添加內(nèi)容
:enabled 選擇器匹配每個(gè)已啟用的元素（大多用在表單元素上）。
:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中
::selection 用戶選中的區(qū)域
:empty 一般用來(lái)隱藏內(nèi)部什么都沒(méi)有的元素
:not(selecter)
p:first-of-type
p:last-of-type
p:only-of-type
p:nth-of-type(n)
p:nth-last-of-type(n)
:nth-child(n)
:nth-last-child(n)
p:only-child
偽類和偽元素區(qū)別偽類值一種狀態(tài) 比如:hover
偽元素是一個(gè)真實(shí)存在的元素，他可以有樣式有內(nèi)容
iconfont原理利用編碼讓圖標(biāo)編為一個(gè)字符
引入字體
利用before偽元素向頁(yè)面中插入一個(gè)文字
css 定義的權(quán)重!important 優(yōu)先級(jí)最高，但也會(huì)被權(quán)重高的important所覆蓋
行內(nèi)樣式總會(huì)覆蓋外部樣式表的任何樣式(除了!important)
多帶帶使用一個(gè)選擇器的時(shí)候，不能跨等級(jí)使css規(guī)則生效
如果兩個(gè)權(quán)重不同的選擇器作用在同一元素上，權(quán)重值高的css規(guī)則生效
如果兩個(gè)相同權(quán)重的選擇器作用在同一元素上：以后面出現(xiàn)的選擇器為最后規(guī)則
權(quán)重相同時(shí)，與元素距離近的選擇器生
一句話總結(jié)：
!important > 行內(nèi)樣式 > ID選擇器 > (類選擇器 | 屬性選擇器 | 偽類選擇器 )> 元素選擇器
.wrapper div > p CSS中，瀏覽器查找元素是通過(guò)選擇權(quán)從后往前找的， 這樣做的目的是加快CSS解析速度，從后往前，排除法
瀏覽器解析css選擇器的規(guī)則
怎樣美化一個(gè)checkbox ?讓原本的勾選框隱藏
input + label 背景圖沒(méi)選中
input:checked + label 背景圖選中
.checkbox input{
display: none;
}
.checkbox input + label{
background:url(./沒(méi)選中.png) left center no-repeat;
background-size:20px 20px;
padding-left:20px;
}
.checkbox input:checked + label{
background-image:url(./選中.png);
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117364.html
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒(méi)有關(guān)系。現(xiàn)在我們回到討論開(kāi)始的地方，哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了，也不是我一個(gè)非得重拾的話題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒(méi)有關(guān)系。現(xiàn)在我們回到討論開(kāi)始的地方，哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了，也不是我一個(gè)非得重拾的話題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...
摘要：不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師，應(yīng)該避免編寫(xiě)一些常見(jiàn)的開(kāi)銷很大的CS...
摘要：不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫(xiě)規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師，應(yīng)該避免編寫(xiě)一些常見(jiàn)的開(kāi)銷很大的CS...
閱讀 936·2021-10-13 09:48
閱讀 3934·2021-09-22 10:53
閱讀 3125·2021-08-30 09:41
閱讀 1954·2019-08-30 15:55
閱讀 2933·2019-08-30 15:55
閱讀 1851·2019-08-30 14:11
閱讀 2214·2019-08-29 13:44
閱讀 776·2019-08-26 12:23
