试图将 CSS 类映射到现有元素答案

【问题标题】：trying to map a css class to an existing element试图将 CSS 类映射到现有元素
【发布时间】：2019-06-06 18:03:55
【问题描述】：

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

所以我有一个标题：

现有：

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

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

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

我需要让第一个sn-p看起来和底部<h2>sn-p完全一样。

如何在不更改 html 的情况下做到这一点？

更新

我无法更改的 HTML 是：

<div class=title>Hello</div>

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

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

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

【问题讨论】：

欢迎来到 StackOverflow，Mediumbean。

标签： html css

【解决方案1】：

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

_{（来源：sampsonresume.com）}

如果你没有 firefox，你可以为 Internet Explorer 获取 IEDeveloperToolbar，如果你使用 Chrome，你可以使用 Chrome 的内置元素检查器。任何浏览器的任何选项都可以。

获得此信息后，您就可以为.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 */
}

【讨论】：

【解决方案2】：

你使用的地方

div.title {}

使用

h2 > span {}

或者只是

h2 {}

【讨论】：

【解决方案3】：

h2 span 如果没有与该选择器匹配的其他内容，则可以正常工作。确保您使用的是重置样式表，这样您就不会从浏览器中为 <h2> 获得任何愚蠢的样式。

【讨论】：

是的，每个浏览器都可以（可能）以不同的方式设置 H2 的样式。不要相信浏览器，完全为自己定义h2。然后让这场比赛变得微不足道div .title
+1 表示选择器建议，-1 表示重置样式表建议。这使得 0.
@BalusC 重置样式表建议有什么问题？

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

新的 CSS 定义了以下规则：

h2 span { ... }

更新它以添加旧标记：

h2 span, div.title { ... }

这会将应用于 h2 内的 span 的所有样式应用于 div。

【讨论】：