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

2016-02-19 13:40 17 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。
  这可能比较复杂,因为嵌套可以多级使用,所以需要多加练习。

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

延伸阅读
标签: Web开发
请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以安全使用在链接上 伪类像是指定选择器状态或关联选择器的门闩。它们的形式如:selector:pseudo class { property: value; },在选择器和伪属性之间使用冒号。 link 没有点击过的链接  visited以点击过的链接  active获...
标签: Web开发
伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。 First letters and First lines 首字母和首行 first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。 p:fir...
标签: Web开发
CSS的组合和嵌套 CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; } 则你可以这样写: h2, .thisOtherClass, .yetAnotherClass { color: red; } 使用组合,你可以一次定义多...
标签: Web开发
  本教程假设您没有任何样式表语言的基础,甚至,您可以完全不知道是什么东东,但是,我们同样假设您已经掌握了基本的语法。比如,您肯定知道是表明页面的头部,是表示页面的一个段落。     、正式开始学习之前的几句啰嗦话: l        不是什么高深的东东,它的编写...
标签: Web开发
HTML代码如下: link type="text/css" rel="stylesheet" href="css/style.css" media="screen" / media=指定这个CSS用于何种设备。具体参数如下: screen (缺省值),提交到计算机屏幕; print, 输出到打印机; projection,提交到投影机; aural,扬声器; braille,提交到凸字触觉感知设...

经验教程

712

收藏

14
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部