CSS的相邻兄弟选择器用法简单讲解

(编辑：jimmy 日期: 2024/10/31 浏览：2)

可选择紧接在另一个元素后的元素，且二者有相同的父级元素 下面代码中，item2和item3会有效果，而item1不会有
HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <ul>  
  2.     <li>item1</li>  
  3.     <li>item2</li>  
  4.     <li>item3</li>  
  5. </ul>  

CSS代码：

CSS Code复制内容到剪贴板
  1. li+li { font-size: 50px; }  

1、如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。

示例

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2.   
  3. <head>  
  4.     <style type="text/css">  
  5.         #p1 + p {   
  6.             margin-top: 50px;   
  7.         }   
  8.     </style>  
  9. </head>  
  10.   
  11. <body>  
  12.     <p id='p1'>This is paragraph 1.</p>  
  13.     <p id='p2'>This is paragraph 2.</p>  
  14.     <p id='p3'>This is paragraph 3.</p>  
  15.     <p id='p4'>This is paragraph 4.</p>  
  16. </body>  
  17.   
  18. </html>  

CSS的相邻兄弟选择器用法简单讲解

上一篇：关于负margin的一些应用
下一篇：对行内元素和块级元素的一些认识

一句话新闻

高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。

最新资源