css6特殊符号 |css 实现图形倾斜

:is(selector1, selector2, ...) {
/* styles */
}

这个符号是一个伪类选择器，可以选择一系列的元素。它非常的便捷，可以代替写很多相同选择器的繁琐工作，比如：

ul li:first-child,
ul li:last-child,
ul li:nth-child(odd),
ul li:nth-child(even){
/* styles */
}

可以使用:is()代替上面的代码：

li:is(:first-child,:last-child,:nth-child(odd),:nth-child(even)){
/* styles */
}

:where(selector1, selector2, ...) {
/* styles */
}

这个符号也是一个伪类选择器，选中某一个或者某些元素，作用类似于:is()。但是它的选择器更灵活一些，可以匹配任意类型的元素。下面是一个例子，使用:where()选中了所有文本输入框（input[type=”text”]）：

:where(input[type="text"]) {
/* styles */
}

:has(selector) {
/* styles */
}

这个符号是下一级，类似于jQuery中的选择器。用于筛选选择器中含有子元素的元素：

div:has(p) {
/* styles */
}

::before {
/* styles */
content: " ";
}

这个符号可以用来在元素的前面添加某些内容，通常来说可以用来绘制一些图标。大家可以通过content属性来指定要添加的内容，也可以通过CSS的background属性来添加背景颜色或者图片：

.menu::before {
content: "\00BB";
margin-right: 8px;
}

使用这些特殊的符号相对于以前更加方便了，使得CSS的代码更加简洁清晰。但是目前这些特殊符号并没有得到所有浏览器的支持，建议谨慎使用。