CSS3选择器总结：

01-认识css3

什么是css3？

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得 Web开发变得更为高效和便捷

css3现状

浏览器支持程度差，需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛
如何对待css3兼容问题？

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

02-属性选择器

li[style]：li标签中有style属性既满足条件
li[class=red]：li标签中class属性的值必须是red
li[class*=red]：li标签中只要包含red
li[class^=blue]：li标签中以blue开头的
li[class$=blue]：li标签中以blue结尾的

03-兄弟选择器

.first + li：.first下面相邻的li元素，如果不是li元素就不起作用
.first ~ li：.first下面所有的li元素会起作用

04-伪类选择器

li:first-child：li的父元素的第一个子元素，如果第一个子元素的类型为li起作用，如果不是li，不起作用
li:last-child：li的父元素的最后一个子元素，如果最后一个子元素的类型为li起作用，如果不是li，不起作用
li:first-of-type：li的父元素的第一个子元素，如果第一个子元素不是li，自动跳过，继续查找，一直查找到第一个li元素
li:last-of-type：li的父元素的最后一个子元素，如果最后一个子元素不是li，自动跳过，继续查找，一直查找到最后一个li元素
li:nth-child(5)：查找到索引为5的（索引从1开始），如果类型不是li，索引也会计算
li:nth-child(even)：查找到索引为偶数的，如果类型不是li，索引也会计算
li:nth-child(odd)：查找到索引为奇数的，如果类型不是li，索引也会计算
li:nth-of-type(even)：产找到索引为偶数的，如果类型不是li，索引不会计算
li:nth-of-type(odd)：产找到索引为奇数的，如果类型不是li，索引不会计算
li:nth-of-type(n):n取值0~子元素的长度，表达式最后的结果如果小于=0 无效的
li:empty：代表li的父元素的子元素下面没有任何内容的元素，连空格都没有

05-伪元素

普通的所有标签都会有before、after，input、img单标签是没有的

::before：默认在普通标签的左面
::after：默认在普通标签的右面
content：放置内容的，并且必须是有的
默认是行内元素，想设置宽高，转化为块元素，display:block;float、position

06-其他伪元素

::first-letter：设置首字母
::first-line：设置文本第一行的样式
::selection：设置当前选中的内容的样式

07-文本阴影的使用

text-shadow:2px 1px 1px red;
第一个值：设置文本阴影横向的偏移
第二个值：设置文本阴影纵向的偏移
第三个值：设置文本阴影虚化程度
第四个值：设置文本阴影的颜色
文本阴影是可以设置多层的，用逗号隔开即可

08-盒模型

我们在给元素设置宽和高的时候，默认，宽高是内容的宽高

box-sizing：border-box

宽高是设置盒子的实际的宽高，不会被padding、border给撑开，并且内容，会变小，因为padding和border向里撑开

box-sizing：content-box

设置内容的宽高，会被padding、border给撑开，content-box也是默认状态

09-边框圆角

border-radius：10px;这样是设置四个角都有效果

border-radius：10px 20px;

第一个值：左上、右下

第二个值：右上、左下

border-radius：10px 20px 30px;

第一个值：左上

第二个值：右上、左下

第三个值：右下

border-radius：10px 20px 30px;

第一个值：左上

第二个值：右上

第三个值：右下

第四个值：左下

圆：设置圆角的宽高的一般

半圆：高度设置一半，圆角设置，左上和右上即可

11-盒子阴影

box-shadow:6px 4px 12px #000；
第一个值：设置盒子阴影横向偏移
第二个值：设置盒子阴影纵向偏移
第三个值：设置盒子阴影的虚化程度
第四个值：设置盒子阴影的范围
第五个值：设置盒子阴影的颜色
第六个值：设置盒子的内阴影
同样也是可以设置多层阴影，还是用逗号隔开

作者：搬砖猴哥
来源：CSDN
原文：https://blog.csdn.net/weixin_41819098/article/details/90106118
版权声明：本文为博主原创文章，转载请附上博文链接！