Question

我看网页代码时看到有这一段<div id="box" class="smallbox"></div>，做这段有什么要求吗，有什么作用吗？

<div id="box" class="smallbox"></div>等同于
<div id="box"><div id="smallbox"></div></div>吗？？
最重要的是：运用并且做出这段代码有什么要求，有什么作用？？？

Answer 1

1：CSS中选择器有3种，上面的 id="box" class="smallbox" 一个是ID选择器 一个是类选择器 但是都是定义样式的！ 他们的作用都是一样的，就是在网页中划出一块区域，然后就可以在该区域中填充内容了。另外ID选择器 在样式表中就要用#box { 控制区域中内容的显示效果} class选择器就是类选择器在样式表中就要用.smallbox {同样控制区域中内容的显示效果} ！
2：上面的两种是不等同的，第一个划出了一块区域 ； 第二个划出2块区域，小区域在大区域里面。
3：运用的要求：网页上的特效需要两方面：第一主体构建框架:<div id="box">我爱百度知道</div>
这样网页上就能显示“我爱百度知道”这几个字了，但是太单调了，所以我们要给他加上颜色和其他的特效，这就要第二个方面了。因为我们已经定义了id=box 那么我们下面就要写样式文件：我们就用#加上id名 也就是#box { ........} 在大括号里写上你想要“我爱百度知道”这几个字的显示什么颜色。在里面填上就可以了，定义颜色的代码是color:颜色代码；比如要显示红色就是#box { color:red;}这样就可以了，同样可以定义很多，比如大小 字体颜色 字体高度 背景颜色 等等 不知道这么说您能不能理解！！

追问

可能我看不懂，在你的答案中，只有第二点（2：）是对题的，其他的 我认为是答非所问。你所答的都是非常概念性的，没有答到我想要的。不知道我懂不懂你想表达的意思？？难道我题目误解了你们？

追答

那您把您的问题再说清楚点吧，这样我们才能尽我们最大的努力帮您解决问题啊

追问

这段代码我想知道什么意思，怎么用，有什么效果。

追答

1这段代码的意思就是：
在网页中划出一块空白区域，就是一块地方，空白的什么都没有的，也不会显示任何东西的区域。
2划出这块区域的目的：
是为了往这块区域中加入内容。一个网页中可以划出很多这样的区域，每个区域里面都能加入内容，这样整体起来，整个网页就能显示很多内容了。
4怎么用：
区域本身是添加内容的，然后内容怎么显示，就要在另外通过CSS代码对区域里面的内容进行调整，比如色彩，大小。想要用这里是说不清楚的，您可以百度CSS教程从头学起。
5效果：
前面就说过了，就你提供的这一段代码，是不会显示任何效果的，因为它不是完整的，还有另一半CSS代码，是能控制这段代码效果的代码，您没有发上来。

不知道现在您弄明白没有？要是还是不懂，继续追问，我会尽快回复您的，希望能帮到您！

追问

如：
#box
{
height:100px;
margin-left:1px;
margin-right:1px;
background-color:#00CC33;
}

.smallbox
{
border-left:1px red solid;
border-right:1px red solid;
}

这算是.smallbox样式辅助#box吗，即class辅助class。如果是辅助法，还有其他什么用法？

追答

你刚上传的这段代码就是CSS样式，就是调整那个区域的CSS代码,
-------------------------------------第一部分代码---------------------------------------------------------
#box
{
height:100px; /*高度*/
margin-left:1px; /*整体与浏览器左侧距离1像素*/
margin-right:1px; /*...........................右侧距离1像素*/
background-color:#00CC33; /*背景色*/
}
-------------------------------------第二部分代码------------------------------------------------
.smallbox
{
border-left:1px red solid; /*左边框粗1像素 颜色为红色 实线*/
border-right:1px red solid; /*有边框粗1像素 颜色为红色 实线*/
}
-------------------------------------------------------------------------------------------------------------
上面是对代码的解释，你问的什么辅助法是什么意思？不太明白啊

第一部分代码是对box样式的调整，第二部分代码是对smallbox样式的调整啊。

还有问题吗？有的话 就粘上来吧！

追问

你难道还看不出来吗，这两段样式代码不就等于将俩合并变成
#box 或 .smallbox{ height:100px; margin-left:1px; margin-right:1px;
background-color:#00CC33;border-left:1px red solid;border-right:1px red solid;}
或
这样一整合与上面所说的效果一样，
这写法不像是辅助或补充吗？？？

追答

达到的效果是一样的，但是从CSS定义上说是不样的，而且我没有用过，也是不常用的吧。我觉得这是多余的用法，不知道你怎么看

追问

这是网址：http://blog.csdn.net/boiaprogramfan0420/article/details/7425663 。你在评论中说的那种方法我也有用过。的确，我给你的网址上所说的圆角方框比你评论说的方法复杂。

Answer 2

<div id="box" class="smallbox"></div>
是一个div应用了两个样式。
（id=和class=都是一种应用样式的手段。）

<div id="box"><div id="smallbox"></div></div>
是一个大div里面再放一个小的div
这些只是框架。
具体的属性值应该是写在专门的css样式页进行外部调用的，
属性书写的格式是： #box{ 这是id=的。} .smallbox{这是class的。}
祝你好运。

Answer 3

不一样的,同时使用除了样式个性化一点,最主要的还是js中使用,因为id是唯一的,可以直接在js获取得唯一的div,但样式可以通过class来确保一样.不知道你要实现什么功能,非要研究这个,总之id一般是用来识别单一性,class用来多在共同样式时使用

追问

这段代码我想知道什么意思，怎么用，有什么效果。就是不知道有什么功能，才在这里提问的。但我想了解，最好能运用。

追答

举个例子吧,比如你有两个div,分别为:

div id="box2" class="smallbox">
当在css中设置
.smallbox{width:20px; height:20px;}
两个div的宽20px;高为20px;
当css中设置
#box1{background:#333333;}
#box2{background:#999999;}
那么结果为:
id为box1的最终样式为:宽20px;高20px;背景颜色:#333333
id为box2的最终样式为:宽20px;高20px;背景颜色:#333333

其实他们说的都对,这里只是实例化而以,如果还是不懂那就没话说了

宽20px;高为20px,背景为:#333333宽20px;高为20px,背景为:#333333

Answer 4

不等同
<div id="box" class="smallbox"></div>:一个层，用到了两种选择器，id样式比class样式的优先级要高
<div id="box"><div id="smallbox"></div></div>：两个层，一般在最大的包含层内用id选择器，方便下面样式的继承

Answer 5

不等同，是两种样式的应用，虽然名字相同。
CLASS是类，ID是特殊值，一般用于JS寻址。
简单的说，CLASS所定义的样式可以在网页中用无数次，而ID所定义的样式一般只用一次（因为它特殊嘛！）
例如:
.smallbox {
color:red;
font-weight:bold;
}

#smallbox{
color:black;
}

<H1 class="smallbox">标题</H1> 这个标题为红色粗体
<H1 id="smallbox">标题</H1> 这个标题为黑色常规体