标签:style blog class code java c
今天新学习的关于css的各种选择器,其中子选择器和相邻兄弟选择器比较重要,可以大大的减少文档中class特性的数量。下面用一个简单的例子介绍一下他们的用处。
事例中需要表达的样式为: 第一个段落无边框也无背景色;
所有<div>中的段落都有边框;
最后3个段落背景色为灰色;
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>
其中,div>p{}是子选择器的用法,他的意思是选择器将匹配任何作为<div>元素的直接子元素<p>,因为事例中第一条<p>元素不需要有边框和背景,我们只对<div>元素中的<p>元素加以控制。
p+p+p{}是相邻兄弟选择器的用法,他的意思是希望所有两个条段落之后的<p>元素不同于其他的<p>元素。
标签:style blog class code java c
原文地址:http://www.cnblogs.com/zhaohualu/p/3724056.html