首页 > > 网页制作 > css >

特殊的上下文选择符

2018-06-24 01:45:49来源：未知阅读 ()

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有