关闭

关闭

关闭

封号提示

内容

首页 使用CSS:选择器模式.doc

使用CSS:选择器模式.doc

使用CSS:选择器模式.doc

上传者: 捡幸福那一年 2017-09-19 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《使用CSS:选择器模式doc》,可适用于IT/计算机领域,主题内容包含使用CSS:选择器模式使用CSS:选择器模式(译年月日星期五下午:(译)(上官无耻)::选择器模式模式描述E类型选择器匹配任何一个名为E的元素。EF符等。

使用CSS:选择器模式使用CSS:选择器模式(译年月日星期五下午:(译)(上官无耻)::选择器模式模式描述E类型选择器匹配任何一个名为E的元素。EF子选择器匹配元素F如果F出现在元素E之内的话。E>F父子选择器匹配元素F如果F是E的子元素。EF相邻选择器匹配元素F如果F和E拥有共同的父元素且F紧随E之后。这里有必要解释一下“父元素”、“子元素”、“父子”及“相邻”这几个概念。为了便于说明请看下面的代码:<div><h>测试<h><p>这是一个<strong>测试<strong>文本~<p><div>从以上代码中我们可以找出这样的关系:*h和p同为div的“儿子”两者分别同div形成“父子”关系。*h,p,strong都是div的“子元素”。(三者都包含在div之内)*div是h和p的“父元素”。*strong和p形成“父子”关系strong的“父元素”是div。*但strong和div并非“父子”关系而是“祖孙”关系但strong依然是div的“子(孙)元素”。*div是hpstrong三者的“祖先”三者是div的“子(孙)元素”。*h和p两者是相邻的。上面一段好像绕口令但是很重要特别是有助于区别对待“EF”和“E>F”这两者的区别。这里我们借助上面的那个例子来演示一下这细微的差别:假如我们需要将strong内的“测试”二字变为红色我们都可以有哪些方法呢,divstrong{color:red},正确。strong是div的“子元素”。p>strong{color:red},正确。strong和p是“父子”关系。div>strong{color:red},错误~strong虽然是div的“子(孙)元素”但两者乃是“祖孙”关系而非“父子”关系因此不能用>符号连接。最后再提一下通用选择器通用选择器以星号“*”表示可以用于替代任何tag比如下边这个:h*{color:red}按照上述定义则所有紧随h的元素内的文字都将呈现红色。使用CSS:排序(译)(上官无耻)::最后定义的CSS样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式比如下面这个例子:p{color:redbackground:yellow}p{color:green}以上的段落最终将呈现绿色的字体并带有黄色的背景这是因为最后定义的color:green将之前定义的red覆盖掉了至于黄色背景为何没有消失那是因为第二个p的定义中并没有与之冲突的定义因此它还是有效的。你真的懂了吗,好我们来做个小测试:pred{color:red}pgreen{color:green}pblue{color:blue}<pclass="redgreenblue">Sampletext<p><pclass="greenbluered">Sampletext<p><pclass="blueredgreen">Sampletext<p>请问最终显示的时候上面三个段落中的文字都将呈现何种颜色呢,思考一下^^答案是它们都显示为blue也就是蓝色尽管每个段落都以不同顺序应用了三个p样式看上去应该按照应用样式的顺序来决定颜色比如第一个显示为blue第二个显示为red第三个显示为green其实这是错误的这与应用样式的顺序无关它们最终都听从最后指定的样式颜色皆为blue。

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/3
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部