热议：CSS为什么这么难学？一定是你的方法不对

我这才意识到我竟然连CSS的语法都看不懂。说实话，以前无论是初学CSS还是临时找一下某个CSS属性的用法，都是直接百度，瞬间就能找到自己想要的答案（例如菜鸟教程），而这次，我是真的傻了！ 因为本身clip-path这个属性就比较复杂，支持的语法也比较多，光看MDN给你的示例代码根本无法Get到这个属性所有的用法和含义（菜鸟教程就更没法全面地教你了）

于是我就顺着网线去了解了一下CSS的语法中的一些符号的含义，帮助我更好得理解语法

因为关于CSS语法符号相关的知识在CSS属性值定义语法 MDN上都有一篇超级详细的介绍了（建议大家一定要先看看MDN这篇文章！！非常通俗易懂），所以我就不多做解释了，这里只放几个汇总表格

属性组合符号

属性组合：表示多个属性值的书写组合情况。例如在border: 1px solid #000中，1px能否和solid互换位置、#000能否省略等等，这些都是属性的组合情况

| 符号 | 名称 | 作用 |

| — | — | — |

| 空格 | 并置 | 空格左右两侧的属性顺序不能互换 |

| , | 逗号(分隔符) | 逗号两侧的属性之间必须用逗号隔开 |

| / | 斜杠(分隔符) | 斜杠两侧的属性之间必须用斜杠隔开 |

| && | "与"组合符 | "与"组合符两侧的属性都必须出现，但左右顺序随意 |

| || | "或"组合符 | "或"组合符两侧的属性至少出现一个，且左右顺序随意 |

| | | "互斥"组合符 | "互斥"组合符两侧的属性恰好只出现一个 |

| [] | 中括号 | 中括号包住的内容表示一个整体，可以类似看成数学中的小括号() |

组合符优先级

"与"组合符、"或"组合符、"互斥"组合符都是为了表示属性值出现的情况，但这三者之间还有个优先级。例如bold | thin || <length>，其中“或”组合符的优先级高于“互斥”组合符，所以该写法等价于bold | [thin || <length>]

| 符号 | 名称 | 优先级（数字越大，优先级越大） |

| — | — | — |

| 空格 | 并置 | 4 |

| && | "与"组合符 | 3 |

| || | "或"组合符 | 2 |

| | | "互斥"组合符 | 1 |

属性重复符号

属性重复：表示某个或某些属性的出现次数。例如在rgba(0, 0, 0, 1)中，数字的个数能否是3个、最后一位能否写百分比。这有些类似于正则的重复符号

| 符号 | 名称 | 作用 |

| — | — | — |

| 无 | 不写符号 | 默认。不写符号表示这个属性只出现一次 |

| + | 加号 | 加号左侧的属性或整体出现一次或多次 |

| ? | 问号 | 问号左侧的属性或整体出现零次或一次 |

| * | 星号 | 星号左侧的属性或整体出现零次或一次或多次 |

| # | 井号 | 井号左侧的属性或整体出现一次或多次，且以逗号(,)隔开 |

| {A, B} | 大括号 | 大括号左侧的属性或整体最少出现A次，最多出现B次 |

| ! | 感叹号 | 感叹号左侧的整体中必须出现一个属性，即使该整体中全部属性都声明了可以出现零次 |

解读CSS语法

以本节clip-path的语法为例，我们来简单对其中某一个属性来进行解读（只会解读部分哦，因为解读全部的话篇幅会很长很长）

先看看整体的结构