background 组合写法_简单学习css组合与CSS嵌套的写法

简单学习css组合与CSS嵌套的写法

互联网   发布时间：2009-04-02 19:38:24   作者：佚名   我要评论

网页制作Webjx文章简介：简单学习css组合与CSS嵌套的写法.

CSS组合

你不必重复有相同属性的多个选择符，你只要用英文逗号(,)隔开选择符就可以了。

比如，你有如下的代码：

h2 { color: red; }

.webjx { col

简单学习css组合与CSS嵌套的写法.

CSS组合

你不必重复有相同属性的多个选择符，你只要用英文逗号(,)隔开选择符就可以了。

比如，你有如下的代码：

h2 { color: red; }

.jb51 { color: red; }

.jb51com { color: red; }

则你可以这样写：

h2,.jb51,.jb51com { color: red; }

使用组合，你可以一次定义多个CSS，为你节省很多字节和时间。

CSS嵌套

CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。(或者更好的说法，上下文选择符--译者著)

比如：

#top { background-color: #ccc; padding: 1em }

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

这就减去不必要的类或者标识选择符，如果应用到像这样的HTML中：

jb51.net

This is my recipe for making curry purely with chocolate

Mmm mm mmmmm

这是因为，用英文半角空格间隔选择符，我们指明了在标识id内的h1有“#ff0”的颜色，而p则是红色red和粗体bold。

这可能也会有些复杂(因为可能不止两级，比如在内在内在内在内等等)。你有必要多加练习。

使用嵌套，可以让你的CSS代码读起来更清晰，能给你制定的元素定制CSS。

相关文章

这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-13

这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-10-12

这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了CSS两种常用的封装示例，帮助大家更好的利用CSS制作网页，感兴趣的朋友可以了解下2020-10-12

这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章给大家介绍了CSS中width和height的默认值auto与%案例，本文通过实例案例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-30

这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

最新评论