引用文字
內容來自《CSS選擇器世界》php
css選擇符辨析
-
(空格)
後代css
- 選擇器優先級相同,後來居上
document.querySelector('#myId').querySelectorAll(':scope div div')
-
>
子html
- 主要目的:避免衝突
- 場景:狀態類名控制、標籤受限、層級位置與動態判斷
-
+
相鄰chrome
-
~
隨後dom
-
||
列svg
選擇器模式
css選擇器最佳實踐
- 小寫、短命名,同一前綴組合‘-’命名<5;
- 面向屬性、語義(html標籤、屬性、僞類)的命名
- 不要駝峯、id、嵌套、標籤、*選擇器
- 狀態類名:.active自身無樣式
- 樣式類型:重置、基礎、交互變化
/* 網站變量 */
:root{--base-color:#4c5161;}
/* 樣式重置 */
body,p,dd,dl,h1,...,ol,ul{margin:0}
/* 通用結構 */
.cs-header{}
.cs-main{}
.cs-footer{}
/* 組件樣式 */
.cs-icon{}
.cs-button{}
.cs-dialog{}
/* 模塊樣式 */
.cs-module-header{}
.cs-module-title{}
.cs-module-x{}
/* 業務樣式 */
.cs-some-...
/* css樣式庫 */
.dn{display:none}
.db{display:block}
.dib{display:inline-block}
.fl{float:left}
僞類
-
用戶行爲網站
-
:hover
不適用移動端;增長延時優化體驗;
- :active 支持任意元素;數據上報;樣式技巧:box-shadow,linear-gradient,outline;
- :focus 非disabled表單元素,href的
<a>
,<area>
,contenteditable的普通元素;鼠標通過行爲的鍵盤訪問
- :focus-within:在擔負起元素或是任意子元素聚焦時;下拉列表;
- :focus-visible:鍵盤訪問的聚焦
:focus:not(:focus-visible){outline:0}
-
URL定位ui
- :link和:visited:和:hover,:active優先級:LVHA
- :any-link:
:link
對已訪問的無效,只做用於<a>
- :target 錨點;場景:展開收起,選項卡
- :target-within target或後代元素,目前暫不支持
-
輸入code
- :enabled和:disabled chrome下enable影響a,ie下fieldset不支持,contenteditable="true"不匹配
- :read-only和:read-write:readonly可被表單提交,disabled不能;
- :placeholder-shown 場景:meterial 風格;空值判斷;
- :default selected checked必須爲true 場景:標記支付方式」推薦「
- :checked 只能表單,而
[checked]
任意,變化並不是實時的;閱讀更多;選項卡;單複選框,開關;
- :indeterminate
checkbox.indeterminate=true
;單選全部name的都沒選中時匹配,沒有name沒選中也匹配;未選中提示文案;
-
輸入值驗證
- :valid和invalid (:user-invalid :blank 還沒有支持)
- :in-range和:out-of-range
- :required和:optional
- :user-invalid和:blank
-
樹結構
- :root 文檔根元素,xhtml,svg。Shadow DOM不行。root負責css變量,html負責樣式
- :empty 可有註釋before after,不能有空格換行。場景:隱藏空元素,字段缺失提示
-
子索引
- :first-child
- :last-child
- :only-child 沒有任何兄弟元素
- :nth-child() 只適用於內容動態的,支持 odd,even,An+B;
- :nth-last-child() 動態列表數量匹配(聊天羣頭像)
li:only-child{} li:first-child:nth-last-child(2){}
-
匹配類型
- :first-of-type和last-of-type
- :only-of-type
- :nth-of-type()和nth-last-of-type()
-
邏輯組合
- :not()
- :is() 簡化
.is(.cs-a,.cs-b) >img
- :where() 做用同樣,但優先級永遠是0
-
其餘
- :host Shadow DOM 根元素
- :host() Shadow DOM 根元素匹配僞類
- :host-context() Shadow DOM 根元素上下文匹配僞類
- :fullscreen 全屏
- :dir(ltr|rtl) 方向
- :lang() 語言
- :playing :paused 音頻元素