加入收藏 设为首页 联系站长
WEB2.0教程 | CSS教程 | HTML教程 | 设计素材 | CSS 模板 | CSS酷站欣赏 | CSS布局实例 | Javascript | 建站代码 | 专业软件 | 常见问题 | 内容搜索
>首页 -> 学习教程 -> CSS教程

TOP

CSS的Grouping and Nesting分组和嵌套

[ 录入者:admin | 时间:2008-01-04 02:12:04 | 作者: | 来源: | 浏览:24次 ]

当许多选择器有同样属性时,可以使用逗号组合它们。
  例子:

 Example Source Code [www.xxcss.com]
h2 {
    color: red;
}
.thisOtherClass {
    color: red;
}
.yetAnotherClass {
    color: red;
}

  上面的可以写成这样:

 Example Source Code [www.xxcss.com]
h2, .thisOtherClass, .yetAnotherClass 
{
    color: red;
}

Nesting 嵌套

  如果CSS结构良好,不需要使用很多class或ID选择器。这是因为CSS可以设定选择器里面选择器的属性。
  例子:
 Example Source Code [www.xxcss.com]
#top {
    background-color: #ccc;
    padding: 1em
}
#top h1 {
    color: #ff0;
}
#top p {
    color: red;
    font-weight: bold;
}

  如果你碰到下面这样的形式,记得处理掉你网页上的class或ID。

 Example Source Code [www.xxcss.com]
<div id="top">
    <h1>Chocolate curry</h1>
    <p>This is my recipe for making curry purely with chocolate</p>
    <p>Mmm mm mmmmm</p>
</div>

  这是由于,通过使用空格分离选择器,我们可以设定IDtop里面的h1颜色为#ff0,p是red和blod。
  这可能比较复杂,因为嵌套可以多级使用,所以需要多加练习。

[上一篇]CSS的Pseudo Classes 伪类 [下一篇]CSS的Class以及ID选择器

评论

称  呼:
内  容:

相关栏目

最新文章

热门文章

推荐文章

相关文章

推荐浏览

中国百度网
安徽皖一月嫂家政
犯罪现场