码迷,mamicode.com
首页 > 其他好文 > 详细

非首位子元素选择器的使用

时间:2014-06-14 18:36:30      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:style   class   code   ext   color   width   

非首位子元素选择器的使用

前方元素 + 目标元素样式声明,它只会匹配紧跟其前方元素的同胞元素,该选择器使用加号“+”来链接前后两个选择器,选择器中的元素(均是兄弟同胞关系)有同一个父亲,而且第二个必须紧紧的跟着第一个。

li + li {

color: red;

}

img, span {

display: block;

}

img + span.caption {

font-style: italic;

color: red;

}


<ul>

<li>one</li> 这一行颜色不变

<li>one</li>

<li>two</li>

<li>three</li>

</ul>


<span class="caption">Before the photo</span>

<img src=“#”/>

<span class="caption">After first photo 1</span>

<span class="caption">After first photo 2</span>

<img src=“#”/>

<span class="caption">After The second photo</span>

非首位子元素选择器的使用,布布扣,bubuko.com

非首位子元素选择器的使用

标签:style   class   code   ext   color   width   

原文地址:http://www.cnblogs.com/yakun/p/3787696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!