css页面问题答案

【问题标题】：css page problemcss页面问题
【发布时间】：2010-09-25 02:44:55
【问题描述】：

我在下面粘贴的代码是为了在中间的 2 个链接上显示图像而不显示文本，然后在重置和第四个链接上返回文本。我只为 span 标签设置了 display:none，但它什么也没做。无论如何，不使用框架就可以简单地做我想做的事吗？

编辑：示例

<html>
    <head>
        <style type="text/css">
                .class1{color:#000; background-image:url('1.jpg');}
        .class1 span { display: none;}
                .class2{color:#00f; background-image:url('2.jpg');}
        .class2 span { display: none;}
                .class3{color:#0f0; background-image:url('1.jpg');}
        .class3 span { display: none;}
                .class4{color:#f00;}

        </style>
    </head>
    <body>
        <script type="text/javascript">
                function sbox(divid, classname)
                {
                        document.getElementById(divid).className=classname;
                 }
        </script>
        <div>
        <a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/>
                <a href="#" onclick="sbox('div1','class2');return false;">try here</a><br/>
                <a href="#" onclick="sbox('div1','class3'); return false;">or here</a><br/>
                <a href="#" onclick="sbox('div1','class4');return false;">or maybe here</a>
        </div>
        <div id="div1" class="class4"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

【问题讨论】：

我认为您需要修复问题的格式。
您缺少引用的示例。

标签： javascript html css

【解决方案1】：

rel 属性应该描述链接与当前文档的关系。它应该具有here 描述的值之一。 DIV 是块级分组元素，而 SPAN 是内联分组元素。 SPAN 允许您出于某种目的（常见样式等）将文本和标签组合在一起，而无需更改标记流。

编辑：这个问题从我下面改变了，所以上面的内容似乎与当前上下文无关。

您需要按照@llandril 所说的做，并给 DIV 一些大小。我建议给 DIV 提供固定的宽度和高度——无论是始终还是在使用显示图像的类之一时。如果要显示整个内容，请使用背景图像的宽度和高度。你可能还需要给它一些内容，但我不这么认为。

我想这就是 class1 的样子。我还没有测试过。

    /* in case color needs to apply to other elements */
    .class1 { color: #000; }

    div .class1 {
        background-image:url('1.jpg');
        width: 60px;
        height: 30px;
    }

    div .class1 span { display: none;}

【讨论】：

他不应该切换他的选择器的顺序。他想更改具有 css 类“class1”的对象内跨度的显示，而不是位于跨度内的具有“class1”的对象的显示。他的选择器的顺序对于他正在尝试做的事情是正确的。
我明白你的意思。我想我误读了这个例子，并假设跨度也是 class1。他实际上将任何元素与包含跨度的 className class1 匹配。我倾向于对我的规则更加精确。更新了我的示例。

【解决方案2】：

div 标签包含一个内容块。 span 标签类似，但包含内联内容。区别？您可以使用 span 在段落中设置短语的样式，但 div 可以包裹该段落并将其与其他段落分开。请参阅 this 获取 div 和 this 获取跨度。

在一些 cmets 之后：这里是，from the horse's mouth:

DIV 和 SPAN 元素与 id 和 class 属性相结合，提供了一种向文档添加结构的通用机制。这些元素将内容定义为内联 (SPAN) 或块级 (DIV)，但不会对内容强加其他表示习语。因此，作者可以将这些元素与样式表、语言属性等结合使用，以根据自己的需要和品味来定制 HTML。

【讨论】：

花一些时间浏览 w3schools.com 对于任何学习这些东西的人来说都是非常有用的。
我不喜欢 w3schools。实际上，我发现 w3.org 上的官方规范更易于浏览。
花时间浏览 w3schools.com 会教你一些非标准信息，并帮助你养成很多坏习惯。

【解决方案3】：

许多 UA（用户代理）通常不使用 rel 属性，但它指定链接页面与当前页面的关系。

某些伪标准已经出现在这个地方，例如 Mozilla 使用 prefetch relation 来预加载页面。 Google 将 [用于设置？] 它的前几个结果设置为以这种方式预取，因此这些页面应该加载得更快。

其他示例是基于浏览器的导航栏（例如 Opera 有其中之一），带有指向下一个、上一个、内容页面等的链接。这也适用于 <link> 元素

【讨论】：

【解决方案4】：

rel也可以用来描述其他语义，见the microformats rel docs

【讨论】：

【解决方案5】：

通常，属性 rel 和 rev 分别描述前向和后向链接。例如，在列表的分页中，您可以使用 <a href="..." rel="next">Next</a> 和 <a href="..." rev="prev">Prev</a>

请参阅http://www.w3.org/TR/html401/types.html#type-links 了解您可以使用的一些值。

其他人已经解释了 span/div 标签。实际上使用 span 标签的情况并不多，因为您通常可以根据上下文使用诸如em、strong、code 等短语元素。

【讨论】：

错字：rev="prev" 应该是 rel="prev"
不，不应该。再次阅读我的帖子。另见：w3.org/TR/html401/struct/links.html#h-12.3.1

【解决方案6】：

DIV 不显示背景图像，因为当您的 span 消失时它没有任何内容。

在 span 之后添加一个不间断空格 ( ) 将为其提供内容。

【讨论】：