特殊的上下文选择符

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的父元素是什么,没有关系。

 

如果文章对你哪怕有一点点的帮助,麻烦点个推荐或者关注,支持一下创作者!万分感谢!

以上是关于特殊的上下文选择符的主要内容,如果未能解决你的问题,请参考以下文章

CSS选择符伪类层叠

伪元素选择符

00伪类选择符-魔芋的理解

Sizzle源码分析:三 筛选和编译

C++ Primer 5th笔记(chap 17 标准库特殊设施)IO库 之操纵符

SQL SERVER - 选择下一行值最多 5 个字符,然后用新字符替换第一个字符