css3选择器使用总结

分手后的思念是犯贱 2022-02-02 09:39 303阅读 0赞

#### 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；
 *  第一个值：设置盒子阴影横向偏移
 *  第二个值：设置盒子阴影纵向偏移
 *  第三个值：设置盒子阴影的虚化程度
 *  第四个值：设置盒子阴影的范围
 *  第五个值：设置盒子阴影的颜色
 *  第六个值：设置盒子的内阴影
 *  同样也是可以设置多层阴影，还是用逗号隔开