码迷,mamicode.com
首页 > 其他好文 > 详细

子选择器、相邻兄弟选择器

时间:2014-05-13 21:09:11      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   c   

      今天新学习的关于css的各种选择器,其中子选择器和相邻兄弟选择器比较重要,可以大大的减少文档中class特性的数量。下面用一个简单的例子介绍一下他们的用处。

      事例中需要表达的样式为: 第一个段落无边框也无背景色;

                                        所有<div>中的段落都有边框;

                                        最后3个段落背景色为灰色;


bubuko.com,布布扣
 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4 <title>相邻兄弟选择器</title>
 5 <style type="text/css">
 6 p{font-family:"Times New Roman", Times, serif;}
 7 div>p{border:1px solid #000000;}
 8 p+p+p{background-color:#999999;}
 9 </style>
10 </head>
11 
12 <body>
13  <p>Paragraph  One:not inside a div element.</p>
14  <div>
15  <p>Paragraph  One: inside a div element.</p>
16  <p>Paragraph  Two: inside a div element.</p>
17  <p>Paragraph  Three: inside a div element.</p>
18  <p>Paragraph  Four: inside a div element.</p>
19  <p>Paragraph  Five: inside a div element.</p>
20  </div>
21 
22 </body>
23 </html>
bubuko.com,布布扣
     其中,div>p{}是子选择器的用法,他的意思是选择器将匹配任何作为<div>元素的直接子元素<p>,因为事例中第一条<p>元素不需要有边框和背景,我们只对<div>元素中的<p>元素加以控制。

      p+p+p{}是相邻兄弟选择器的用法,他的意思是希望所有两个条段落之后的<p>元素不同于其他的<p>元素。 

 

子选择器、相邻兄弟选择器,布布扣,bubuko.com

子选择器、相邻兄弟选择器

标签:style   blog   class   code   java   c   

原文地址:http://www.cnblogs.com/zhaohualu/p/3724056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!