太狼文摘 记录 & 思辨

CSS Child & Adjacent Sibling Selectors

技术 - 2011/10/4

最近在重拾Web Design方面的知识,打算帮忙把OPhone俱乐部的官方主页界面改一下。突然发现有的忘了,有些基础的东西以前没有碰到,所以技术这个东西还是要不断用才不会荒!

对于CSS Child & Adjacent Sibling Selectors问题,即是有关子级选择器和相邻同级选择器的问题。

/* the first part */
<div>
<p>我很<em>爱</em>你!</p>
<em>我很爱你!</em>
</div>

/* the second part */
<div>
<h1>淘宝</h1>
<p>美丽说、蘑菇街</p>
<p>社会化电子商务、社会化产品设计</p>
</div>

第一个例子中,p标签是<div>的子级,而<em>是p标签的子级;

第二个例子中,<h1>和<p>是同级的,且都是div的子级,而<h1>和第一个<p>是相邻同级。

/* the first part */
div em { color:black;}  /* 意味着对于所有em标签都适用 */
div > em { color:red; }  /* 意味着对于所有作为子标签出现的em适用 */

/* the second part */
h1+p { color:red; }  /* 第一个p段落文字为红色 */
h1+p+p { color:blue; }   /* 第二个p段落文字为蓝色 */

子选择器和相邻同级选择器的使用状况已经说明清楚!

相关阅读:

1. CSS Child & Adjacent Sibling Selectors

2. 《CSS中文参考手册》

3. stackoverflow——What’s css style “p+p”?



扫一扫分享到微信
分享到微信

无觅相关文章插件,快速提升流量