CSS 選擇器

APICloud 發布于2019-08-30 15:55 / 1942人閱讀

摘要：選擇器分類標簽選擇選擇器選擇器后代選擇子代選擇相鄰選擇通配符選擇否定選擇器屬性選擇器偽類選擇器偽元素選擇器屬性選擇器選擇器描述用于選取帶有指定屬性的元素。在元素之后添加內容選擇器匹配每個已啟用的元素大多用在表單元素上。

CSS 選擇器分類

標簽選擇

id選擇器

class選擇器

后代選擇（div a）

子代選擇（div > p）

相鄰選擇（div + p）

通配符選擇（*）

否定選擇器 :not(.link){}

屬性選擇器

偽類選擇器

偽元素選擇器 ::before{}

CSS3屬性選擇器

選擇器	描述
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
[attribute l=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。

CSS3偽類選擇器

偽類 | MDN
常用：

:hover

:focus

:after 在元素之前添加內容,也可以用來做清除浮動。

:before 在元素之后添加內容

:enabled 選擇器匹配每個已啟用的元素（大多用在表單元素上）。

:disabled 控制表單控件的禁用狀態。

:checked 單選框或復選框被選中

::selection 用戶選中的區域

:empty 一般用來隱藏內部什么都沒有的元素

: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

偽類和偽元素區別

偽類值一種狀態比如:hover

偽元素是一個真實存在的元素，他可以有樣式有內容

iconfont原理

利用編碼讓圖標編為一個字符

引入字體

利用before偽元素向頁面中插入一個文字

css 定義的權重

!important 優先級最高，但也會被權重高的important所覆蓋

行內樣式總會覆蓋外部樣式表的任何樣式(除了!important)

多帶帶使用一個選擇器的時候，不能跨等級使css規則生效

如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則生效

如果兩個相同權重的選擇器作用在同一元素上：以后面出現的選擇器為最后規則

權重相同時，與元素距離近的選擇器生

一句話總結：
!important > 行內樣式 > ID選擇器 > (類選擇器 | 屬性選擇器 | 偽類選擇器 )> 元素選擇器

瀏覽器解析CSS

.wrapper div > p CSS中，瀏覽器查找元素是通過選擇權從后往前找的，這樣做的目的是加快CSS解析速度，從后往前，排除法

瀏覽器解析css選擇器的規則

怎樣美化一個checkbox ?

讓原本的勾選框隱藏

input + label 背景圖沒選中

input:checked + label 背景圖選中

.checkbox input{
  display: none;
}
.checkbox input + label{
  background:url(./沒選中.png) left center no-repeat;
  background-size:20px 20px;
  padding-left:20px;
}
.checkbox input:checked + label{
  background-image:url(./選中.png);
}


  
  我很帥

云服務器 GPU云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117364.html

WEB前端 CSS

摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標簽選擇器后跟標簽后代，無論直屬還是間接直屬，直接后代毗鄰后代中最近的一個弟弟，找到和自己同級的標簽如通過多個選擇器好到具體的標簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結構 CSS選擇器標簽選擇...

darry 2019-04-23 13:34 評論0 收藏0
編寫高效的 CSS 選擇器 – CSS魔法

摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。有很多人都忘記了，或在簡單的說沒有意識...

forrest23 2019-08-02 16:16 評論0 收藏0
編寫高效的 CSS 選擇器 – CSS魔法

摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。有很多人都忘記了，或在簡單的說沒有意識...

hyuan 2019-08-30 10:50 評論0 收藏0
前端面試題-CSS選擇器性能優化

摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

Scott 2019-08-30 14:08 評論0 收藏0
前端面試題-CSS選擇器性能優化

摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

XGBCCC 2019-08-01 18:42 評論0 收藏0