Question

我的html无法更改，因此我需要将新的css样式表映射到页面上的现有元素。

所以我有一个标题：

现有：

<div class="title">Hello</div>

我对此页面的新css有新的css和标记，但html看起来像：

<h2><span>Hello</span></h2>

我需要让第一个代码段与底部的<h2>代码段完全相同。

如何在不更改html的情况下执行此操作？

更新

我无法改变的HTML是：

<div class=title>Hello</div>

我有一个新的样式表，我必须实现，但它有一个样式，但它只适用于：

<h2><span>title</span></h2>

所以我必须改变类标题的行为，以模仿<h2><span>所做的输出。

Answer 1

啊，你希望.title类似于h2 span，而不是相反。我给你的建议是下载Firebug for firefox（假设你正在使用firefox）并检查你的h2元素，看看它目前有哪些样式，以及它可能已存在哪些选择器。

alt text http://sampsonresume.com/labs/firebug.JPG

如果您没有Firefox，则可以获取Internet Explorer的IEDeveloperToolbar，或者使用Chrome时使用Chrome内置的Element Inspector。任何浏览器的任何选项都可以。

获得此信息后，您就可以复制.title { }的规则。

/* According to Firebug for Firefox, we ought to use the following
   rules to mimic our h2 elements */
.title {
  background-image: url(../images/h2bg.png);
  background-position: left top;
  background-repeat: no-repeat;
  color: #FFFFFF;
  /* etc */
}

Answer 2

你在哪里使用

div.title {}

使用

h2 > span {}

或只是

h2 {}

Answer 3

如果没有其他内容与该选择器匹配，

h2 span将正常工作。确保您使用的是重置样式表，这样您就不会在<h2>的浏览器中获得任何愚蠢的样式。

Answer 4

您甚至可以将两个选择器分配到同一组：

.title, h2 span { font-weight: bold; color: #0F0; ... }

Answer 5

新CSS定义以下规则：

h2 span { ... }

更新它以添加旧标记：

h2 span, div.title { ... }

这会将应用于h2内部范围的所有样式应用于div。

尝试将css类映射到现有元素

5 个答案: