CSS选择器的一些用法 _CSS选择器

文章插图
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

【CSS选择器的一些用法】还有个强大的功能, 在Scss和Sass中使用
& 表示当前选中的元素, 所以可以用嵌套的方式, 但操作的是自己的
参考链接:
https://css-tricks.com/snippets/sass/caching-current-selector-sass/
参考链接:
https://www.w3schools.com/css/css_combinators.asp