Question

更具体地说，给定一组定义名为“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"，还是我必须咬紧牙关并更新我的每一个内容网页？

Answer 1

不要使事情过于复杂

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

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

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

如果您使用JavaScript进行此类操作，那似乎并不合理，因为长文档会在用户可能已经看到内容时进行转换。而且我没有看到为什么人们想要使用JavaScript来实现这一点并且在每个请求上给客户端施加负担而不是在服务器上更改一次。这是过度工程的一个很好的例子。虫子萌芽的另一个表面。你应该避免这种情况。

如果您的设计师决定更改CSS，您的H1元素也会发生变化。但是，如果设计师决定将内容名称从content_title更改为其他内容，那么您的H1元素将不会跟随。但他们也不会使用JavaScript。因此，如果您只是替换文件，它几乎是一样的。

最佳解决方案

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

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

到

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

您可以完成的工作量最少。当设计师更改样式时，它们将针对两个定义进行更改，因此您无需将样式复制到H1定义中。 Voila问题解决了。

Answer 2

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

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

[编辑] 好的意图取代了正确的答案。谢谢Brian！

Answer 3

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

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

在<h1>选择器上设置的样式上，无法更改简单的.content_title标记，而无需更改CSS。您可以做的最小变化是@Sotiris建议的，这是非常小的。

您可以从.. 某处;）

识别此答案的文字

Answer 4

我怀疑你对这个设计师风格的问题不会是你的最后一个问题。我会创建和管理一个名为“style_overrides.css”的单独的CSS文件。确保在原始样式之后声明文件。然后，将.content-title声明复制到新文件中，并修改选择器以阅读.content-title, H1。

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

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

4 个答案:

不要使事情过于复杂

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

最佳解决方案