当前位置:天才代写 > tutorial > 网页教程 > CSS选择器之子元素选择器

CSS选择器之子元素选择器

2018-05-17 08:00 星期四 所属: 网页教程 浏览:306

      选择器是css里面非常重要的一部分知识。根据不同的样式定义,CSS提供了不同类型的选择器。大家可以根据自己的实际情况选择合适的选择器来编写代码。子元素选择器就是其中一种比较常用的选择器,下面小编跟大家简单介绍一下其相关内容。

选择器

       一、子元素选择器

  简单来说,子元素选择器就是只选择作为某元素子元素的元素。

  如果你认为后代选择器范围过大,希望缩小范围,只选择某个元素的子元素,而不是任意后代元素。这时可以选用子元素选择器

       二、语法解释

       1.子元素选择器的结合符

  子元素选择器使用大于号”>”作为结合符。例如,你只想选择作为h2元素子元素的strong元素,可以这样简单编写代码:

  h2 > strong{color: green;}

  温馨提示:子结合符两边都可以接受空白符,也就是说以下的写法都是等价的:

等价写法

       2.子元素选择器的解释

  选择器h2>strong{color:green;}我们可以解释为:选择作为h2元素子元素的所有strong元素。

  注意:选择器是从左向右读的

       三、实例探讨

  接下来我们来探讨一下子元素选择器的实际应用,请看下面的代码:

实例探讨代码

  你觉得这条规则的运行效果是什么?答案就是这个规则会把第一个h1下面的两个strong元素变为红色,但是第二个h1中的strong不受影响:为什么第二个h1中的stong不受影响呢?这是因为我们只对作为h1元素子元素的stong作了定义,而第二个h1中的strong元素解释为:作为em元素子元素的stong,显然不符合我们的规则。

  看看下面的运行效果图就一目了然了

实例运行效果图

       四、与后代选择器的区别

  首先我们对上面的实例进行一下小修改:将h1 > strong {color:red;}改为h1 strong {color:red;}运行,结果如下:

后代选择器运行效果图

  如上图所示,第二个h1中的strong元素也变为红色。这时你能看出子元素选择器与后代选择器的区别了吗?

  它们的区别就在于嵌套的层次上!

  后代选择器可以选择指定元素的任意后代元素,无论这个元素在规则中嵌套的层次有多深。而子选择器只能选择作为指定元素的子元素,即选择的元素是紧挨指定元素后面的元素,其嵌套关系只能是一层。

       五、与后代选择器结合使用

  请看下面这个选择器:

  table.company  td > p

  咋一看,是否觉得这个选择器很复杂,很难理解它们的嵌套关系?别紧张,让小编为你解释一下:这个选择器会选择作为td元素子元素的所有p元素,这个td元素本身从table元素继承,该table元素有一个包含company的class属性。

  这是一篇CSS的基础课程,通过这篇教程的学习,相信大家都弄懂了子元素选择器的相关内容。由于在CSS中,选择器的类型比较多,所以,我们可以尝试把子元素选择器与其他各种选择器结合使用,看看有什么效果,说不定会发现其中的奥妙之处喔!

 

    关键字:

天才代写-代写联系方式