5、派生选择器_第1页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、5、派生选择器派生挑选器，乍一看名字不知所云，它又名上下文挑选器，它是用法文档dom结构来举行css挑选的。dom结构在此不再赘述了，但为了越发清晰地解释问题，我们这里给出一个dom树作为参考： (1)后代挑选器(descendant selector)如上图，假如想要挑选body元素的全部li子元素，办法如下：body li .这里会挑选全部的li后代，也就是图中的body下的全部li，不论他们之间相隔的代数有多少。同理，假如想要挑选h1元素下的span，可以用法以下代码：h1 span .假如我们要挑选拥有warning类的元素的li后代，可以用法下面的办法：.warning li .固然

2、，假如希翼只挑选拥有warning类的div元素的li后代，可以写作：div.warning li .由上面的例子不难看出，后代挑选器的规章就是用空格衔接2个或多个挑选器。空格的含义为：的后代。多个挑选器的状况如下： ul li li .这样，就会挑选全部ul下包含在li元素下的全部li元素了，听起来非常拗口，参考我们的dom树，会挑选到文档树种最后一排li元素。(2)子元素挑选器(child selector)子元素挑选器和后代挑选器不同，它只能挑选某元素的挺直后代，不能跨代选取，使用如下：ul > li .两个子元素中间用一个大于号>衔接。上面的代码会挑选到全部ul元素的挺直l

3、i子元素。对应到dom树中，全部的li元素都会被选中，缘由是图中全部的li元素都是ul的子元素。但是，以下代码将不会选中任何元素：h1 > span .因为span是h1的孙子元素，h1没有挺直的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特殊注重的就是子元素挑选器不能隔代选取。(3)相邻兄弟挑选器(adjacent sibling selector)相邻兄弟挑选器，故名思意将会选取某个元素的相邻兄弟元素，注重它选取的是相邻的兄弟元素而不是全部的兄弟元素，事实上选取的是紧跟在后面的兄弟元素。相邻兄弟挑选器在实践中有比较不错的应用，例如，你想在一个h2标题

4、后面的段落应用某种独到的样式或者希翼在某类p段落后的table上添加一个额外的边距等等。它的使用如下：li + li .以上代码会挑选全部作为li相邻元素的li元素，听起来又有点拗口，参考dom树，它会挑选除了排在第一个li元素的其余4个li元素，由于2个排在第1的li元素没有更靠前的兄弟元素来挑选它。再比如：h1 + p . 会挑选全部紧跟h1后面的p兄弟元素。h1.warning + p . 会挑选全部实用warning类的h1元素后面紧跟的p兄弟元素。(4)几种派生挑选器的结合用法事实上，以上介绍的几种派生挑选器可以结合用法，看下面的例子：html > body li.warning + li .

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论