CSS3选择器 | 每个前端开发者必须要掌握的技术

大家好，又见面了，我是你们的朋友全栈君。

目录

• 属性选择符
• 伪类选择符
• CSS3属性
• CSS3自适应

属性选择符

如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。

• E[att] {} : 选择具有att属性的E元素
• E[att="val"]{}: 选择具有att属性且属性值等于val的E元素
• E[att~="val"]{}:用于选取属性值中包含指定词汇的元素
• E[att|="val"] {}:选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择
• E[att*="val"]{}:选择具有att属性且属性值为包含val的字符串的E元素
• E[att^="val"] {}:选择具有att属性且属性值为以val开头的字符串的E元素
• E[att$="val"] {}:选择具有att属性且属性值为以val结尾的字符串的E元素

伪类选择符

1. 结构性伪类选择器

css中已经定义好的选择器，不能随便起名字

2. 选择奇偶行

• nth-child(odd)与nth-child(even): 不足之处： nth-child选择器在计算子元素时，第奇数个元素还是偶数个元素时，是连同父元素内的所有 子元素一起计算的（默认匹配他们得是相同的子元素）
• nth-of-type(odd)奇数和:nth-of-type(even)偶数：完美解决上面的问题

3.循环使用样式

:nth-child(n)：选取每一行

n:所有的行 2n:每2行选择一行 3n:每3行选择一行 n+2:除第1行外所有的行 2n+4:从第4行开始隔1行选择1行

:nth-last-child(n)：从后向前选择,n为参数

n:所有行 2:倒数第2行 -n+3:最后3行 :only-child：只有一个元素时使用

4.目标伪类选择器 :target：

• 使用该选择器来对页面中的某个target元素（锚记链接）指定样式

5.UI 元素状态伪类选择器

6.动态伪类选择器

7.伪类和伪元素的区别

css伪类：

• 状态伪类基于元素当前状态进行选择的。
• 结构伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。

css伪元素：

• 对元素中的特定内容进行操作，而不是描述状态
• css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号

8.层级选择器

相邻兄弟选择器：

• li + li:后边相邻的选择器会被选中，第一个li不会被选中

通用兄弟选择器：

• li ~ li:li后面的所有li元素被选中

子选择器：

• ul> li:ul后面直接的li元素被选中

9.渐进增强、优雅降级

渐进增强（Progressive Enhancement）：

• 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：

• 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

区别：

• 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；
• 而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要；
• 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

CSS3属性

a)文本阴影：

例：

text-shadow:5px 5px 5px #f66;

指定多个阴影：(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)

text-shadow：10px 10px #f66,40px 35px #f00,70px 60px #000;

b)自动换行：

word-break

• normal ：使用浏览器默认换行规则
• keep-all：只能在半角空格或连接字符处换行
• break-all：允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的）

c)word-wrap：

让长单词与URL地址自动换行

• normal：只在允许的断字点换行（浏览器保持默认处理）
• break-word：属性允许长单词或 URL 地址换行到下一行。

d)RGB:

• 是一种色彩标准，是由红®、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。
• RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法：

color：rgba(R,G,B,A)

• 以上R、G、B三个参数，正整数值的取值范围为：0 – 255。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
• A为透明度参数，取值在0~1之间，不可为负值。

e)圆角：

border-radius:5px;

• 如果有两个值：第一个值表示左上角、右下角；第二个值表示右上角、左下角。
• 如果有三个值：第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。

f)盒子阴影：

box-shadow:5px 5px 10px #f66;

添加多个阴影，用逗号隔开即可。

如：

.box_shadow{ 
   
  box-shadow:4px 2px 6px #f00, 
  -4px -2px 6px #000, 
  0px 0px 12px 5px #33CC00 inset;
}

CSS3自适应

width :

fill-available/fit-content/max-content/min-content

• fill-available:充满整个可用宽度和可用高度
• fit-content:将元素宽度收缩为内容宽度
• max-content:内部元素宽度值最大的那个元素的宽度=最终容器的宽度。如 出现文本，则相当于文本不换行
• min-content:内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度

注意：以上属性值需要加前缀

补充：

calc函数：此CSS函数让你在声明CSS属性值时执行一些计算

语法：

width: calc(100% - 80px); // +-×÷运算符都可使用

注： 用 0 作除数会让 HTML 解析器抛出异常；

• “+” 和 “-” 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。
• 而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
• “*” 和 “/” 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157484.html原文链接：https://javaforall.cn