通过增删选择符熟练各个选择符的用法：(注：笔者FF浏览器在源码上注释一部分内容后并不能改变运行后的输出结果，必须删除要注释的内容才行)
<!DOCTYPE html>
<html> <head> <style type="text/css"> section>h1 {font-style:italic;} h1+p {font-variant:small-caps;} h1~a {color:purple;} * h1 {color:red;} * p {color:blue;} * a {color:green;} p * {color:black;} </style></head><body><section> <h1>An H2 Heading</h1> <p>This is paragraph 1</p> <p>Paragraph 2 has <a href="#">a link</a> in it.</p> 嵌套标签内标签默认是紫色，且有下划线 <a href="#">Link</a> </section></body></html>最终效果：
1、 子选择符>
标签1 > 标签2 标签2必须是标签1的子元素，或者反过来说，标签1必须是标签2的父元素。与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。 section>h1 {font-style:italic;}2、 紧邻同胞选择符+ 标签1 + 标签2 标签2必须紧跟在其同胞标签1的后面。 h1 + p {font-variant:small-caps;}3、 一般同胞选择符~ 标签1 ~ 标签2 标签2必须跟（不一定紧跟）在其同胞标签1后面。h1 ~ a {color:purple;}4、 通用选择符*通用选择符*（常被称为星号选择符）是一个通配符，它匹配任何元素。* p {color:blue;} 这样只会把p包含的所有元素的文本变成l蓝色；
p * {color:black;}会把p标签下的内嵌标签a link变成黑色；
a *{color:green;}把所有的a标签变成绿色。
这个选择符有一个非常有意思的用法，即用它构成非子选择符。比如：
section * a {font-size:1.6em;}任何是section孙子元素，而非子元素的a标签都会被选中。至于a的父元素是什么，没有关系。
如果文章对你哪怕有一点点的帮助，麻烦点个推荐或者关注，支持一下创作者！万分感谢！