特殊的上下文选择符
Posted Tracy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了特殊的上下文选择符相关的知识，希望对你有一定的参考价值。
通过增删选择符熟练各个选择符的用法：(注：笔者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的父元素是什么，没有关系。
如果文章对你哪怕有一点点的帮助，麻烦点个推荐或者关注，支持一下创作者！万分感谢！
以上是关于特殊的上下文选择符的主要内容，如果未能解决你的问题，请参考以下文章