是否可以将 CSS 类选择器映射到标签选择器？答案

【问题标题】：Is it possible to map a CSS class selector to a tag selector?是否可以将 CSS 类选择器映射到标签选择器？
【发布时间】：2011-06-27 05:55:26
【问题描述】：

更具体地说，给定一组定义名为“content_title”的类选择器的样式表，有没有一种方法可以将该样式应用于所有<h1>标签，而无需将每个标签更改为<h1 class="content_title">，即有效地应用该样式类到给定元素的所有实例？

上下文是我正在尝试将来自图形设计师的 HTML 和 CSS 应用到现有的 Web 应用程序中，并且某些选择器的匹配度不是很好。

我有一个使用母版页和主题的 ASP.NET Web 表单应用程序。我收到了一个包含多个样式表的 HTML 示例/模板。

所以我更新了我的母版页以使用新设计，现在它看起来像这样：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="MyMaster.master.vb" Inherits="MyApp.MyMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!-- these are the new style sheet from the graphic designer -->
    <link rel="stylesheet" href="../layout.css" media="screen" />
    <link rel="stylesheet" href="../cssmenus.css" type="text/css" />
    <link rel="stylesheet" href="../dropdown.css" media="screen" />
    <link rel="stylesheet" href="../print.css" media="print" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body class="twocolumn">
    <div id="container">
        <!-- etc. etc. -->

            <div id="mainContent_app">
                    <span class="content_title"></span> <!-- this is intended to be a page header/title -->

                    <form id="form1" runat="server">
                    <div>
                        <asp:ContentPlaceHolder ID="MainForm" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>
                    </form>
            </div>
            <!-- end #mainContent -->

        <!-- etc. etc. -->
    </div>
</body>
</html>

我的问题是，在设计者使用<span class="content_title"></span> 表示页眉的地方，我在所有内容页面中都使用了<h1>。例如：

<%@ Page Title="Simple single serving form" Language="vb" AutoEventWireup="false" MasterPageFile="~/MyMaster.Master" CodeBehind="MyPage.aspx.vb" Inherits="MyApp.MyPage" Theme="MyTheme" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="keywords" content="keyword1 keyword2 keyword3" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainForm" runat="server">
    <h1>This is the page header.</h1>
    <p>Here's some text that tells you what to do with this form.</p>
</asp:Content>

我的目标是使用设计师的风格，而无需编辑包含<h1> 的每个内容页面。

我可以将设计师 CSS 中的样式复制到我的应用程序主题中的样式表（当然，用类选择器替换标签），但是我不会真正使用源 CSS，我必须下次外部 CSS 更改时再次执行此操作。

我也不太可能更改外部 CSS 以适应我的应用程序。

那么关于样式的应用，我可以做些什么聪明的事情来使<h1> == class="content_title"，还是我必须硬着头皮更新我的每一个内容页面？

【问题讨论】：

咬紧牙关。对<h1> 到<h1 class="content_title"> 运行全局查找和替换到底有多难？
为什么不把css从.content_title {properties}改成.content_title, h1 {properties}呢？如果我理解正确您的要求。
@Sotiris “我也不太可能更改外部 CSS 以适应我的应用程序。” - 他实际上无法编辑 css
@thirtydot - 没那么难，真的。 :) 我可能只是想多了，因为感觉类选择器真的应该是一个标签选择器，考虑到它的使用方式，而且我的 CSS 很简陋，让我想知道什么我不知道。感谢您的实际检查。
@Matt：写<span class="content_title"></span> 的人应该是.. 受过教育标题应该几乎总是<h[1..6]> 标签。

标签： asp.net css master-pages css-selectors

【解决方案1】：

如果你使用 jquery，你可以运行类似的东西：

jQuery(function($){$('h1').addClass('content_title');});

[编辑] 用正确的答案代替了善意。谢谢布赖恩！

【讨论】：

在这种情况下不使用 jQuery。不过是个好主意。
你的意思是jQuery(function($){$('h1').addClass('content_title');}); 对吗？ ;)
糟糕。我写的时候已经很晚了（午夜之后）。 :) 谢谢指正！

【解决方案2】：

不要把事情复杂化

在我看来这是一个非常简单的在文件中替换场景。我会在我的所有文件中搜索<h1> 并将其替换为<h1 class="content_title">。

我知道这不是您想要的，因为它看起来很乏味，但是您可以直接在 Visual Studio 中使用此功能。因此，您可以一次性替换所有 H1 元素。它会带你什么？几秒钟？如果您使用不同类型的 H1 元素（一些已经使用 class 属性并且您想添加这个额外的类，您可以这样做，但您必须使用一些正则表达式来进行搜索和替换。

为什么 Javascript 在这里没有用处？

如果您将 JavaScript 用于此类事情，这似乎不合理，因为长文档将被转换，而用户可能已经看到内容。而且我看不出有什么理由要使用 JavaScript 来执行此操作，并在 每个请求 上给客户端增加负担，而不是 在服务器上更改一次 .这是过度设计的一个很好的例子。虫子可以发芽的另一个表面。你应该避免这种情况。

如果您的设计师决定更改 CSS，您的 H1 元素也会随之更改。但是如果设计师决定将 CSS 类名从 content_title 更改为其他名称，您的 H1 元素将不会跟随。但是他们也不会使用 JavaScript。因此，如果您只是在文件中替换，它实际上是相同的。

最佳解决方案

打开 CSS 文件并更改以下代码：

/* maybe some selectors here */ .content_title
{
    ...
}

到

h1,
/* maybe some selectors here */ .content_title
{
    ...
}

你能做的最少的工作。当设计师更改样式时，两个定义的样式都会发生更改，因此您不必将样式复制到 H1 定义中。瞧，问题解决了。

【讨论】：

+1 你是对的。我喜欢 KISS 原则，现在我建议使用 jQuery。我错了。根据问题中的信息，这是最好的解决方案。
其中一个 +1 来自我，这是一个很好的详细答案。
+1 表示“不要使事情过于复杂”；有时我需要提醒。 :-)

【解决方案3】：

我怀疑您在使用这位设计师的风格时遇到的问题不会是您的最后一个问题。我将创建和管理一个单独的 CSS 文件，名称很明显，例如“style_overrides.css”。确保在原始样式之后声明该文件。然后，将.content-title 声明复制到新文件中，并将选择器修改为.content-title, H1。

我知道它不是很干燥，但它可以让您覆盖原始样式中的大量错误（只是猜测）。我想如果你能胜任这项任务，你可以编写一些笨拙的 ASP 脚本，在原始 CSS 文件中搜索预先指定的声明，并在编写新的 CSS 文件之前应用必要的修改。虽然，这几乎肯定不值得你花时间......

【讨论】：

【解决方案4】：

咬紧牙关。对<h1> 到<h1 class="content_title"> 运行全局查找和替换到底有多难？

写<span class="content_title"></span> 的人应该是.. 受过教育的 标题应该几乎总是<h[1..6]> 标签。

在不更改 CSS 的情况下，无法在 .content_title 选择器上设置的样式上使用普通的 <h1> 标签。你可以做的最小的改变是@Sotiris 建议的，这是非常小的。

您可能会从.. 某处 ;)

认出这个答案的文字

【讨论】：