您现在的位置是：网站首页> 编程资料编程资料

CSS的相邻兄弟选择器用法简单讲解CSS选择器的权重与优先规则分享CSS 选择器演示全面了解css 属性选择器举例讲解CSS的子元素选择器用法CSS选择器实现字段解析

2021-09-04 939人已围观

简介 对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下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-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>  

2016712114934794.png (268×203)

上一篇：对行内元素和块级元素的一些认识浅谈CSS块级元素与行内元素(内联元素)的区别和联系 进一步理解CSS编程中的块级元素和行内元素CSS行内元素和块级元素的居中实例分析全面了解行内元素与块级元素的区别

下一篇：关于负margin的一些应用CSS 之margin知识点(必看)css布局之负margin妙用及其他实现CSS的margin属性在页面布局中的使用攻略细说CSS中margin属性的使用 深入解析CSS中margin属性的使用CSS中使用负margin值来调整居中位置关于ol和ul的padding和margin默认值CSS属性探秘系列(六)：margin

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网