发布日期:2014-02-12 13:40 来源: 标签: CSS 选择符
本文讲解css组合选择符的四种选择符。
         一CSS E F 包含选择符
        E F -- CSS包含选择符,匹配文档中符合选择符规定的包含关系的元素
        语法: E F...
         E F...,E、F代表简单选择符
         说明:匹配文档中符合选择符规定的包含关系的元素,例如"E F"选择符匹配文档中包含在E元素中的F元素,包含选择符是由两个或多个并列的以空格(whitespace)分隔的简单选择符组成,"后裔、儿孙"descendant代表文档中一个元素是另外一个元素的孩子、孙子...,也就是一个元素包含另外一个元素
包含选择符的英文名称为"descendant combinator",descendant,中文"后裔、儿孙"的意思,combinator,中文"组合"的意思。
        示例
div p
{
 color: red;
}
当p被div包含时(p是div的后裔时),p中文字的颜色为红色
<div>
        <p>梦之都CSS 包含选择符</p>
</div>
<div>
        <span>
                <p>梦之都CSS 包含选择符</p>
        </span>
</div>
上面两个例子都可以,只要是p被div包含就可以
div p span code
{
 color: green;
}
div span code
{
 color: green;
}
      注: 包含关系不限制包含的层数,例如上面的两个示例只要code被div包含,code内的文字颜色为绿色。注意:多个选择符组成的包含选择符一定要使用空格隔开。
p *
{
 color: blue;
}
      上面的p与全局选择符的例子定义了p中的所有元素内的文字颜色都为蓝色
h1
{
 color: red;
}
em
{
 color: red;
}
h1 em
{
 color: blue;
}
<h1>梦之都的 <em>蓝色文字</em> 红色文字</h1>
      上例为包含选择符与类型选择符的层叠
div p
{
 color: red;
 font-size: 120%;
}
div p span cite
{
 color: green;
 font-size: 120%;
}
p *
{
 color: blue;
 font-size: 180%;
}
      上例为比较复杂的包含选择符
ol li

 list-style-type:decimal;

ol ol li

 list-style-type:lower-latin;

ol ol ol li

 list-style-type: lower-roman;
}
<ol>
  <li>梦之都
          <ol>
                  <li>教程
                          <ol>
                                  <li>html</li>
                                  <li>css</li>
                                  <li>javascript</li>
                          </ol>
                  </li>
                  <li>索引</li>
                  <li>示例</li>
          </ol>
  </li>
  <li>dreamdu
          <ol>
                  <li>tutorial</li>
                  <li>index</li>
                  <li>examples</li>
          </ol>
  </li>
</ol>
     上例展示了多个ol组成的包含选择符
     浏览器兼容性


       二 CSS子对象选择符
       E > F -- CSS子对象选择符,匹配文档中符合选择符规定的直接包含关系的元素
      语法: E > F...
      E > F...,E、F代表简单选择符
      说明:匹配文档中符合选择符规定的直接包含关系的元素,例如E > F选择符,匹配当F元素是E元素的子元素的E元素,包含选择符是由两个或多个使用>(大于号,greater-than sign)连接的简单选择符组成"孩子、儿女"child代表文档中一个元素是另外一个元素的孩子,也就是一个元素直接包含另外一个元素,包含选择符比子选择符范围更广,因包含关系中一个元素可以是另外一个元素的"儿子"、"孙子"、"从孙子",而子对象选择符中的一个元素只能是另外一个元素的"儿子","孙子"或"从孙子"不行,子对象选择符的英文名称为"child combinator",child,中文"孩子、儿女"的意思,combinator,中文"组合"的意思。
       示例

p > code

{

 color:blue;

 font-size:120%;

}

<p>

        <code>梦之都CSS子对象选择符可用,蓝色</code>

</p>

     上面的例子可以显示p > code定义的样式.

<p>

        <span><code>梦之都CSS子对象选择符不可用</code></span>

</p>

      上面的例子不能显示p > code定义的样式,因为p与code不是直接包含关系,是间接包含关系(code是p的"孙子")和包含选择符一样,直接子对象选择符也可以扩展。

p > span > code

{

 color:green;

 font-size:80%;

}

p > span > code选择符可以正常显示上面的示例2

p > code

{

 color:red;

 font-size:120%;

}

p > span > code

{

 color:green;

 font-size:120%;

}

div ol > li p

{

 color:blue;

 font-size:120%;

}

浏览器兼容性
三 CSS直接相邻选择符
       E + F -- CSS直接相邻选择符,匹配文档中符合选择符规定的直接相邻关系的元素
       语法: E + F
      E + F,E、F代表简单选择符
     说明:匹配文档中符合选择符规定的直接相邻关系的元素,例如E + F选择符,E和F在文档被相同的元素包含(具有相同的父元素),且文档中F紧随E之后出现,则选择符匹配元素F,包含选择符是由两个使用+(加号,plus sign)连接的简单选择符组成,"相邻兄弟、姐妹"adjacent sibling代表文档中一个元素是另外一个元素的并排相邻,举个例子:如果一个母亲只有三个亲生儿子,老大、老二、老三,那么老大与老二就是直接相邻关系,老大与老三是普通相邻关系。
      在HTML文档中head与body标签总是直接相邻的,而且他们都是html标签的子元素,直接相邻选择符的英文名称为"adjacent sibling combinator",adjacent,中文"邻"的意思,sibling,中文"兄弟、姐妹"的意思,combinator,中文"组合"的意思。
     示例
h1 + p
{
 color:red;
}
      上面例子定义了直接相邻选择符
<h1>CSS 直接相邻选择符</h1>
<p>
        使用了样式
</p>
由于p和h1是直接的邻居,所以p段落中的内容可以显示红色样式
<h1>CSS 直接相邻选择符</h1>
<span>错误</span>
<p>
        无法使用样式
</p>
下面的一个例子,缩小了紧跟在h1之后的h2元素的垂直距离:
h1 + h2
{
 margin-top: -1em;
 color: green;
}
下面的规则同上一个类似,不过它加入了类选择符。因此只有当h1具有class=dreamdu类时才适用:
h1.dreamdu + h2
{
 margin-top: -2em;
 color: red;
}
     浏览器兼容性

四 CSS普通相邻选择符
       E ~ F -- CSS普通相邻选择符,匹配文档中符合选择符规定的普通相邻关系的元素
      语法: E ~ F
      E ~ F,E、F代表简单选择符
     说明:匹配文档中符合选择符规定的普通相邻关系的元素,例如E ~ F选择符,E和F在文档被相同的元素包含(具有相同的父元素)且文档中F在E后出现(无需紧随其后),则选择符匹配元素F,包含选择符是由两个使用~(破折号,tilde)连接的简单选择符组成,"普通兄弟、姐妹"general sibling代表文档中一个元素与另外一个元素有同一个父元素,但这两个元素不是并排相邻关系,举个例子:如果一个母亲只有三个亲生儿子,老大、老二、老三,那么老大与老二就是直接相邻关系,老大与老三是普通相邻关系,普通相邻选择符的英文名称为"general sibling combinator",general,中文"一般、普通"的意思,sibling,中文"兄弟、姐妹"的意思,combinator,中文"组合"的意思。
    示例

span ~ p

{

 color:red;

}

       上面例子定义了普通相邻选择符,只有被同一个元素包含的且p在span后面出现,则匹配选择符p
       浏览器兼容性

相关评论

专题信息
    如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。CSS最主要的目的是将文件的内容与显示分隔开来,有着许多的好处。如果你是初学者,那么就从我们的 CSS 入门基础教程开始吧,相信您肯定会受益良多的。