当前位置： 文江博客话题详情

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

发布于 2024-10-17 12:43:33 字数 3097 浏览 3 评论 0原文

更具体地说，给定一组定义名为“content_title”的类选择器的样式表，是否有一种方法将该样式应用于所有

标记，而不将每个标记更改为 < ;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>

我的问题是设计器使用 为了表示页面标题，我在所有内容页面中使用了

。例如：

<%@ 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>

我的目标是使用设计器的样式，而不必编辑包含

的每个内容页面。

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

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

那么，在样式的应用方面，我可以做一些聪明的事情来使

== class="content_title" ，还是我必须咬住项目符号并更新我的每一个内容页面？

原文

More specifically, given a set of style sheets that define a class selector called "content_title", is there a way to apply that style to all <h1> tags without changing each one to <h1 class="content_title">, i.e. to effectively apply that class to all instances of a given element?

The context is that I'm trying to apply HTML and CSS from a graphic designer to existing web applications and some of the selectors don't match up very well.

I have an ASP.NET web forms application that uses master pages and a theme. I've been given an HTML sample/template that that includes several style sheets.

So I updated my master page to use the new design, and now it looks something like this:

<%@ 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>

My problem is that where the designer uses <span class="content_title"></span> to represent the page header, I've used <h1> in all the content pages. For example:

<%@ 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>

My goal is to use the designer's style without having to edit every content page that includes an <h1>.

I could copy the styles from the designer's CSS to the stylsheet in my app's Theme (substituting the class selector for the tag, of course), but then i wouldn't really be using the source CSS and I'd have to do this again the next time the external CSS changes.

I'm also not likely to get the external CSS changed to fit my app.

So is there something clever I can do to make <h1> == class="content_title" with respect to the application of styles, or will I have to bite the bullet and update each and every one of my content pages?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

几味少女 2024-10-24 12:43:33

不要使事情过于复杂

在我看来，这是一个非常简单的在文件中替换场景。我会在所有文件中搜索

并将其替换为

。

我知道这不是您想要的，因为它看起来很乏味，但您可以直接在 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 定义中。瞧，问题解决了。

Don't overcomplicate things

Seems to me this is a very simple Replace in Files scenario. I'd search for <h1> in all my files and replace that with <h1 class="content_title">.

I know this is not what you wanted since it seems tedious but you have this capability in Visual Studio directly. So you can replace all H1 elements in one go. It would take you what? Few seconds? If you use different kinds of H1 elements (some that already use class attributes and you'd like to add this additional class, you can do the same but you'll have to use some regular expression to do the searching and replacement.

Why is Javascript not beneficial here?

If you use JavaScript for this kind of thing it doesn't seem reasonable, since long documents will get transformed while user may already see the content. And I don't see a reason why one would want to do this using JavaScript and put a burden on the client side on every request instead of changing this once on the server. This is a very good example of over-engineering. Another surface where bugs can sprout. You should avoid such situations.

If your designer decides to change the CSS your H1 elements will change as well. But if designer decides to change CSS class name from content_title to something else, your H1 elements won't follow. But they wouldn't follow by using JavaScript either. So it practically the same if you just do a replace in files.

Best solution

Open CSS file and change the code that says:

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

to

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

The smallest amount of work you can do. And when designer changes styles, they will get changed for both definitions so you won't have to copy styles to your H1 definition. Voila problem solved.

回复 原文
泪之魂 2024-10-24 12:43:33

硬着头皮吧。运行全局查找并将

替换为

到底有多难？

编写 的人应该......受过教育，标题几乎应该总是 标签。

在不更改 CSS 的情况下，不可能使普通的

标记拾取 .content_title 选择器上设置的样式。您可以做的最小更改是@Sotiris 建议的，这是非常小的。

您可能会在……某个地方认出这个答案的文字；）

Just bite the bullet. How hard is it really to run a global find and replace for <h1> to <h1 class="content_title">?

Whoever wrote <span class="content_title"></span> should be.. educated that titles should almost always be <h[1..6]> tags.

It is not possible to make a plain <h1> tag pick up on styles set on a .content_title selector, without changing the CSS. The smallest change you could make to do it is that suggested by @Sotiris, which is very minimal.

You may recognize the text of this answer from.. somewhere ;)

回复 原文
苏大泽ㄣ 2024-10-24 12:43:33

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

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

I suspect the problem you're having with this designer's styles will not be your last. I would create and manage a separate CSS file named something obvious like, "style_overrides.css". Make sure that file gets declared after the original styles. Then, copy the .content-title declaration into your new file and modify the selector to read .content-title, H1.

I know it's not very DRY, but it will allow you to override the multitude of mistakes (just a guess) that were made in the original styles. I suppose if you were up to the task, you could write some bomb-ass ASP script that searches the original CSS files for pre-specified declarations and applies the necessary modifications before writing a new CSS file. Although, that almost certainly isn't worth your time...

回复 原文
怀中猫帐中妖 2024-10-24 12:43:33

如果您使用 jquery，您可以运行如下命令：

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

[编辑]
良好的意图被正确的答案所取代。谢谢布莱恩！

If you're using jquery, you can run something like:

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

[edit]
Good intention replaced with correct answer. Thanks Brian!

回复 原文
~没有更多了~

关于作者

失与倦＂

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文