class属性中间存在空格，到底是什么意思呢？！

来源：互联网发布：兰芝淘宝旗舰店编辑：程序博客网时间：2024/04/23 16:10

今天看到一个非常好用的样式用法，给已经在睡梦中苏醒的你们来一段代码头脑风暴。

大家都知道现在div+css布局的使用已经不是可以用潮流来概括的了，换个词应该是：普及。

以前的表格布局现在是少之极少，因为表格布局会产生太多的字符数，而且代码版面没有div+css样式来得简洁明了。

很多设计员应该都知道一个样式对应一个class，那么反过来呢，是不是也是一对一的关系？我想不是的，css样式不会局限于此，这就是css样式的强大之一了。

接下来看下class对应多个样式究竟怎么写？为了方便大家查看代码，我就直接复制代码下来了，方便讲解。

大家把目标锁定在加粗的部分，稍微懂一点代码的人都应该可以发现我最后一个div的class是这样的class="bottom content"，注意这个bottom和content之间的空格。这样的样式应用是什么意思呢？

这就是我今天要分享的。这种就是样式的交叉应用，也可以称为样式叠加法。

当两个样式之和是你要的第三个样式的时候，你就没有必要在去书写第三个样式了，直接使用样式的交叉使用方法，这样可以省去你很多编写样式的时间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<style type="text/css">

.top { font-weight:bold}

.content {background-color:#F00;}

.bottom { font-size:20px;}

.yanse {color:#0F0}

</style>

<body>

<div class="top">

这里单独设置字体加粗！

</div>

<div class="content">

这里单独设置字体的颜色！

</div>

<div class="bottom">

设置的是字体的大小！

</div>

<div class="bottom content">

设置字体的大小和背景颜色！

</div>

</body>

</html>

0 0