CSS语法中 > + ~ * 具体都代表什么？

admin

> + ~ 以下情况称之为特殊的上下文选择符

名称：子选择符 >
格式：标签1 > 标签2
要求：标签1 必须是 标签2 的父元素，不能是其它的祖先元素
作用域：标签2
代码示例：

1. section > h2 {font-style: italic;}

复制代码

名称：紧邻同胞选择符+
格式：标签1 + 标签2
要求：标签2 必须紧跟在期同胞标签1后面
作用域：标签2
代码示例：（标签 h2 和 p 为同一级标签，且标签p和 h2 相邻。(只应用到p标签））

1. h2 + p {font-variant: small-caps;}

复制代码

名称：一般同胞选择符 ~
格式：标签1 ~ 标签2
要求：标签2 必须跟在其 同胞标签1 后面（可以不相邻）
作用域：标签2
代码示例：（标签a 和 标签h2 同一级，且a标签在h2 标签之后。（只应用与a标签））

1. h2 ~ a {color: red;}

复制代码

名称：通用选择符 *
说明：通用选择符 * 是一个通配符，它匹配任何元素
代码示例：

1. * {color: green;}                                        //这条规则会将所有元素（文本和边框）都变成绿色。
   
2. p * {color: red;}                                        //这条规则会把p包含的所有元素的文本都变成红色。
   
3. section * a {font-size: 1.3em;}                //所有section标签的 非子标签（*是所有的子标签）的a标签字体设置为 1.3 em;
   

复制代码

原文： https://juejin.im/post/596f6c1e51882526426624ad?utm_source=gold_browser_extension