CSS基础教程: CSS的分组(Grouping)和嵌套(Nesting)

2016-02-19 13:40 20 1 收藏

今天图老师小编要跟大家分享CSS基础教程: CSS的分组(Grouping)和嵌套(Nesting)，精心挑选的过程简单易学，喜欢的朋友一起来学习吧！

【 tulaoshi.com - Web开发】

Grouping 分组

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

h2 {
    color: red;
}
.thisOtherClass {
    color: red;
}
.yetAnotherClass {
    color: red;
}
　　上面的可以写成这样：

h2, .thisOtherClass, .yetAnotherClass
{
    color: red;
}
Nesting 嵌套

　　如果CSS结构良好，不需要使用很多class或ID选择器。这是因为CSS可以设定选择器里面选择器的属性。
　　例子：
#top {
    background-color: #ccc;
    padding: 1em
}
#top h1 {
    color: #ff0;
}
#top p {
    color: red;
    font-weight: bold;
}
　　如果你碰到下面这样的形式，记得处理掉你网页上的class或ID。

div id="top"
    h1Chocolate curry/h1
    pThis is my recipe for making curry purely with chocolate/p
    pMmm mm mmmmm/p
/div
　　这是由于，通过使用空格分离选择器，我们可以设定IDtop里面的h1颜色为#ff0，p是red和blod。
　　这可能比较复杂，因为嵌套可以多级使用，所以需要多加练习。

来源:http://www.tulaoshi.com/n/20160219/1604927.html

上一篇： excel2010行高和列宽设置
下一篇： Win8.1 Update降级到Win8.1的操作步骤

看过《CSS基础教程: CSS的分组(Grouping)和嵌套(Nesting)》的人还看了以下文章更多>>

CSS基础教程: CSS的分组(Grouping)和嵌套(Nesting) 02-19
CSS基础教程:CSS的应用 02-19
CSS基础教程:CSS的color颜色 02-19
CSS基础教程:margin和padding 02-19
CSS基础教程:CSS的Text 文本 02-19
CSS基础教程:CSS中的定位（position） 02-19
CSS基础教程:CSS的At-Rules@规则 02-19
CSS基础教程:CSS网页布局Page Layout 02-19
CSS基础教程:CSS的Pseudo Classes 伪类 02-19
CSS教程:css组合与CSS嵌套的写法 02-19

CSS基础教程:CSS的伪元素Pseudo Elements

标签： Web开发

伪元素吸附在选择上和pseudo classes伪类很像，像这样selector:pseudoelement{property: value;}。有四种方式。 First letters and First lines 首字母和首行 first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。 p:fir...

CSS基础教程:Borders 边框

标签： Web开发

CSS Borders 边框边框可以运用到body里的大部分HTML元素。制作一个元素的边框，你需要border-style边框样式。值可以是： solid, dotted, dashed, double, groove, ridge, inset and outset，具体样式大家可以实际下。 border-width设定宽度，通常使用pixels即单...

CSS代码组合和嵌套

标签： Web开发

CSS的组合和嵌套 CSS组合你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。比如，你有如下的代码： h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; } 则你可以这样写： h2, .thisOtherClass, .yetAnotherClass { color: red; } 使用组合,你可以一次定义多...

初学CSS的基础教程:在网页中使用CSS

标签： Web开发

本教程假设您没有任何样式表语言的基础，甚至，您可以完全不知道是什么东东，但是，我们同样假设您已经掌握了基本的语法。比如，您肯定知道是表明页面的头部，是表示页面的一个段落。、正式开始学习之前的几句啰嗦话： l 不是什么高深的东东，它的编写...

CSS基础教程:CSS样式表与具体设备

标签： Web开发

HTML代码如下： link type="text/css" rel="stylesheet" href="css/style.css" media="screen" / media=指定这个CSS用于何种设备。具体参数如下： screen (缺省值)，提交到计算机屏幕； print，输出到打印机； projection，提交到投影机； aural，扬声器； braille，提交到凸字触觉感知设...

查看更多精彩>>