首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 15:58:08 CSS   选择器"

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

XML/HTML Code复制内容到剪贴板
  1. <ul>  
  2.     <li>item1li>  
  3.     <li>item2li>  
  4.     <li>item3li>  
  5. ul>  

CSS代码:

CSS Code复制内容到剪贴板
  1. li+li { font-size50px; }  

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>  

2016712114934794.png (268×203)

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/77747.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持