梳理你常用的非普通的CSS选择器（非id class tag), 非冷门
daybreakcold opened this issue · comments
E:first-child
E:last-child
这两个选择器非常有效，因为经常在项目中，遇到列表第一个和最后一个的样式和列表中间的是有区分，用这两个选择器能比较好的解决这个问题。
E:before
E:after
这两个选择是一个在元素之间一个是在元素之后添加一些内容，我经常用到的是修饰的一些内容，可以用样式简单写出来的形状，其实也可以理解为觉得用标签写比较浪费，用before和after正好可以撑起它来，不至于产生一些无意义的标签。
最后分享一个网站 https://caniuse.com/
E：nth-child(n)
E：nth-of-type(n)
选择第几个子元素，nth-of-type(n)是指父元素下第n个元素，而nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
属性选择器: tag[prop="val"]
匹配所有标签名为tag且属性prop等于val的所有元素.
- ^= 选中以val开头的
- $= 选中以val结尾的
- ~= 包含val, 以val为整体进行判断的, 比如:
html:
<div class="text ex"></div>
<div class="text ext"></div>
css:
div[class~="ex"]会匹配到<div class="text ex"></div>
div[class*="ex"]两个div都会匹配到.
- *= 包含任意val的元素, 示例同上.
E：nth-child(n)
E：nth-of-type(n)
选择第几个子元素，nth-of-type(n)是指父元素下第n个元素，而nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
感觉不是很常用 。。 而且现在列表的数量都是动态的，如果不走CSS变量的话，这个确实还是比较鸡肋。
属性选择器: tag[prop="val"]
匹配所有标签名为tag且属性prop等于val的所有元素.
- ^= 选中以val开头的
- $= 选中以val结尾的
- ~= 包含val, 以val为整体进行判断的, 比如:
html: <div class="text ex"></div> <div class="text ext"></div> css: div[class~="ex"]会匹配到<div class="text ex"></div> div[class*="ex"]两个div都会匹配到.
- *= 包含任意val的元素, 示例同上.
这个匹配确实还不错，但是通过加class覆盖样式基本都能解决问题了，说不出来，这样匹配的话，会不会对以后的扩展会有影响。
E:first-child
E:last-child
这两个选择器非常有效，因为经常在项目中，遇到列表第一个和最后一个的样式和列表中间的是有区分，用这两个选择器能比较好的解决这个问题。
E:before
E:after
这两个选择是一个在元素之间一个是在元素之后添加一些内容，我经常用到的是修饰的一些内容，可以用样式简单写出来的形状，其实也可以理解为觉得用标签写比较浪费，用before和after正好可以撑起它来，不至于产生一些无意义的标签。
最后分享一个网站 https://caniuse.com/
当父元素下只有指定的类型：使用:first-child / :last-child
当父元素下除了指定类型外，还有其他标签元素：使用:first-of-type / :last-of-type
当父元素下除了指定类型（某一类名）外，还有其他同类标签元素，且已知其他标签个数：使用:nth-child(n) / :nth-last-child(n)或:nth-of-type(n) / :nth-last-of-type(n)
作者：Minorjone
链接：https://juejin.im/post/5e54f2f66fb9a07cbc2695da
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。