CSS选择器之相邻兄弟选择器
当前位置:以往代写 > 网页教程 >CSS选择器之相邻兄弟选择器
2019-06-14

CSS选择器之相邻兄弟选择器

      选择器是css里面非常重要的一部分知识,根据不同的样式定义,CSS提供了不同类型的选择器,大家可以根据自己的实际情况选择合适的选择器来编写代码,前面的课程我们对类选择器,子元素选择器等作了介绍,下面让我们一起来探讨一下相邻兄弟选择器。

      一、定义

  相邻兄弟选择器(Adjacentsiblingselector)可选择紧接在另一元素后的元素,且二者有相同父元素。

  例如,如果要改变紧接在h2元素后出现的段落的字体颜色,可以这样写:

  h2 + p {color:green;}

      二、语法解释

     1.选择器的读法

  h2 + p {color:green;}

  这个选择读作:“选择紧接在h2元素后出现的段落,h1和p元素拥有共同的父元素”。

     2.选择器的结合符

  由上面的代码,我们可以清楚地知道,相邻兄弟选择器的结合符是“+”。

  注意:与子结合符一样,相邻兄弟结合符旁边可以有空白符。

  接下来,我们先看一个文档树片段:

CSS选择器之相邻兄弟选择器_CSS教程,选择器,CSS代码_课课家

      在上面的片段中,div元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。这个很容易理解!

  这里,我们需要注意一点:第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

      我们再来看一段代码:

代码

  运行效果如下:

效果图

  很明显,第一个p元素应用了规则,即表明第一个p元素与h2元素是相邻兄弟。

  特别提示:用一个结合符只能选择两个相邻兄弟中的第二个元素。如上面的代码,选择器只会把第一个p元素改变了字体颜色,而其他的p元素字体颜色并没有发生改变。

      三、结合其他选择器

  相邻兄弟结合符还可以结合其他结合符

代码

  嘻嘻,这个选择器一眼看上去,是否有一种摸不着头脑的感觉。其实这个选择器解释为:选择紧接在table元素后出现的所有兄弟ul元素,该table元素包含在一个body元素中,body元素本身是html元素的子元素。

  好了,相邻兄弟选择器的相关内容,今天就简单地介绍到这里。希望大家课后能在与其他选择器结合使用这一块多作尝试,为日后能合理正确使用选择器打下坚实的基础。如果您想了解更多不同类型的选择器,欢迎继续关注我们的课课家网站喔!

    关键字:

在线提交作业