css選擇器很強大
下面是我在工作中使用最多的一些選擇器:
相鄰元素, 英文稱為sibling, 也就是兄弟姐妹的意思.其實很形象, 比喻兩個dom是相鄰的.但是鄰居很多, 緊密相鄰的, 還是一大片鄰居
- adjacent sibling selector (+) 互相緊密相鄰的
- general sibling selector (~) 所有的鄰居
孩子元素, DOM是分為父元素parent,和孩子元素child
- child selector (>)
- 第一個孩子:first-child()
- 最后一個孩子:last-child()
用`class`和`ID`來選擇
- div["#id"]
- div[".class"]
用屬性來判斷
- input[type="text"]
- input[type="email"]
用狀態來判斷
- input:focus
- button:disabled
還有個強大的功能, 在Scss和Sass中使用
& 表示當前選中的元素, 所以可以用嵌套的方式, 但操作的是自己的
參考鏈接:
https://css-tricks.com/snippets/sass/caching-current-selector-sass/
參考鏈接:
https://www.w3schools.com/css/css_combinators.asp
