网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

可选择紧接在另一个元素后的元素，且二者有相同的父级元素 下面代码中，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的一些应用
下一篇：对行内元素和块级元素的一些认识
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。