码迷,mamicode.com
首页 > Web开发 > 详细

CSS相邻兄弟选择器

时间:2015-08-30 19:16:22      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素。

  

代码一:
<body>   <h1>This is a heading.</h1>   <p>This is paragraph.</p>   <p>This is paragraph.</p>   <p>This is paragraph.</p>   <p>This is paragraph.</p>   <p>This is paragraph.</p> </body> 使用选择器 h1 + p{ color: red; }

效果:

技术分享

这里只会选择第一个p元素,原因是只有第一个p元素与h1关系是紧接着的构成相邻兄弟,第一个p元素之后的p都不与h1紧接着。

 

    
  代码二:
  <body> <li>111</li> <li>111</li> <li>111</li> </ul> <ol> <li>111</li> <li>111</li> <li>111</li> </ol> </body>      使用选择器   li + li {    color: red;   }

 

  效果:

  技术分享

  为什么每一个li都应用了样式啊?

  因为第二个li之后,每两个li之间都直接都构成了紧接着的li + li关系,所以都被选中了

 

CSS相邻兄弟选择器

标签:

原文地址:http://www.cnblogs.com/yangxunwu1992/p/4771190.html

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