热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS相邻兄弟选择器

相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素。代码一:<body><h1>Thisisaheading.<h1>&

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

  

代码一:
  

This is a heading.


  

This is paragraph.


  

This is paragraph.


  

This is paragraph.


  

This is paragraph.


  

This is paragraph.





使用选择器
h1
+ p{
color: red;
}

效果:

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

 

    
  代码二:
  <body> <li>111li>
<li>111li>
<li>111li>
ul>
<ol>
<li>111li>
<li>111li>
<li>111li>
ol>
body>

  

  使用选择器

  li + li {
   color: red;
  }

 

  效果:

  

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

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

 


推荐阅读
author-avatar
mobiledu2502878243
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有