详解CSS3中的选择器(二)层次选择器

上一讲我们讲解了CSS3中的基本选择器,这一节我们详解下层次选择器。

什么是层次选择器

我们都知道DOM是一个树状结构,在树状结构中有根节点、父节点、子节点、兄弟节点等概念。CSS也引入了这些概念到选择器中,对应的关系就是层次选择器。层次选择器共有四种,分别为:

  • 后代选择器(E F)
  • 子选择器(E>F)
  • 相邻兄弟选择器(E+F)
  • 通用兄弟选择器(E~F)

在Web开发中,用的较多的是前两个-后代选择器和子选择器。
我们先来看一段代码:

<!DOCTYPE html>
        <html lang="en-US">
          <head>
            <meta charset="utf-8">
            <title>使用CSS3层次选择器</title>
            <style type="text/css">
              * {margin:0;padding:0;}
              body {width: 300px; margin:0 auto;}
              div{margin:5px;padding:5px;border:1px solid #ccc;}
            </style>
          </head>
          <body>
            <div class="active">1</div>
            <div>2</div>
            <div>3</div>
            <div>4
              <div>5</div>
              <div>6</div>
            </div>
            <div>7
              <div>8
                <div>9
                  <div>10</div>
                </div>
              </div>
            </div>
          </body>
        </html>

后代选择器

所谓的后代选择器,就是用来选择某个元素的所有的后代元素,比如上面的html中,使用如下的样式,会产生什么效果呢?

body div { background-color: yellow; }

这里将body元素的后代div元素设置背景色为yellow。也就是说,所有的div都被染上了黄色。

子选择器

所谓的子选择器,就是选择某个元素下(可能是多个元素)所有的一级子元素。比如,我们使用下面的选择器及样式,会有什么效果呢?

body > div { background-color: red; }

这样设置后,body下的一级div元素,这里是内容为1、2、3、4、7的div元素设置背景色为红色。

相邻兄弟选择器

相邻兄弟指的是某个(或某些)元素同级目录下的下一个元素。比如,这里我们使用下面样式设置后的效果是什么样的呢?

.active + div { background-color: green; }

这里我们设置了.active选择器的相邻兄弟节点,也就是第二个div元素,将其背景色设置为了绿色。

通用兄弟选择器

所谓的通用兄弟,就是某个(或某些)元素的同级目录下所有的后面的标记。它和相邻兄弟选择器类似,需要在同一个父元素中。
比如使用下面的代码,影响到的样式:

.active ~ div { background-color: pink; }

这里将类名为"active"的元素(这里为第一个div)的通用兄弟(这里是内容为2、3、4、7的div)设置了背景色为粉红色。

你可能感兴趣的:(CSS3技术详解,css)