CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3每日一练之选择器-兄弟元素选择器

CSS3每日一练之选择器-兄弟元素选择器

    关于选择器的部分,最后要介绍的一个选择器是通用兄弟选择器,他用来指定位于同一个氟元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式,它的使用方法如下所示:

Element ~ 兄弟元素
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-兄弟元素选择器 | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
  9.             p{height:30px; line-height:30px;}
  10.                 div ~ span{display:block; margin-bottom:5px; height:22px; line-height:22px; color:#fff; background:#900;}
  11.         </style>
  12.     </head>
  13.    
  14.     <body>
  15.         <span>此span为div之前的兄弟元素</span>
  16.         <span>此span为div之前兄弟元素</span>
  17.         <div>
  18.             前端开发网(W3Cfuns.com)!
  19.             <p>W3CSchool,web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
  20.             <span>此span为div的子元素</span>
  21.             <p>CSS3每日一练之选择器-状态伪类选择器[五] | 前端开发网(W3Cfuns.com)!</p>
  22.             <span>此span为div的子元素</span>
  23.         </div>
  24.         <span>此span为div之后的兄弟元素</span>
  25.         <span>此span为div之后的兄弟元素</span>
  26.         <span>此span为div之后的兄弟元素</span>
  27.     </body>
  28. </html>

【CSS3每日一练之选择器-兄弟元素选择器】相关文章

1. CSS3每日一练之选择器-兄弟元素选择器

2. CSS3每日一练之选择器-结构性伪类选择器[三]

3. CSS3每日一练之选择器-结构性伪类选择器[二]

4. CSS3每日一练之选择器-结构性伪类选择器[一]

5. CSS3每日一练之选择器-状态伪类选择器[五]

6. CSS3每日一练之选择器-属性选择器

7. CSS3每日一练之选择器-状态伪类选择器[四]

8. CSS3每日一练之选择器-状态伪类选择器[三]

9. CSS3每日一练之选择器-状态伪类选择器[二]

10. CSS3每日一练之选择器-状态伪类选择器[一]

本文来源:https://www.51html5.com/a858.html

点击展开全部

﹝CSS3每日一练之选择器-兄弟元素选择器﹞相关内容

「CSS3每日一练之选择器-兄弟元素选择器」相关专题

其它栏目

也许您还喜欢