你的位置:首页 > 网页设计

[网页设计]特殊的上下文选择符

通过增删选择符熟练各个选择符的用法:(注:笔者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的父元素是什么,没有关系。