Можно ли сопоставить селектор класса CSS с селектором тега? - PullRequest
Новая
       265

Можно ли сопоставить селектор класса CSS с селектором тега?

1 голос
/ 15 февраля 2011

В частности, учитывая набор таблиц стилей, которые определяют селектор классов с именем «content_title», существует ли способ применить этот стиль ко всем тегам <h1>, не меняя каждый из них на <h1 class="content_title">, т.е. эффективно применять класс для всех экземпляров данного элемента?

Суть в том, что я пытаюсь применить HTML и CSS от графического дизайнера к существующим веб-приложениям, и некоторые селекторы не очень хорошо совпадают.

У меня есть приложение веб-форм ASP.NET, которое использует главные страницы и тему. Мне дали образец 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" в отношении применения стилей, или мне придется прикусить пулю и обновить каждую из моих страниц контента?

Ответы [ 4 ]

5 голосов
/ 15 февраля 2011

Не усложняйте вещи

Мне кажется, это очень простой сценарий Замена в файлах .Я бы искал <h1> во всех моих файлах и заменил бы на <h1 class="content_title">.

. Я знаю, что это не то, что вы хотели, поскольку это кажется утомительным, но у вас есть эта возможность в Visual Studio напрямую.Таким образом, вы можете заменить все H1 элементов за один раз.Это займет у вас что?Несколько секунд?Если вы используете различные типы H1 элементов (некоторые из которых уже используют атрибуты class и вы хотите добавить этот дополнительный класс, вы можете сделать то же самое, но вам придется использовать некоторое регулярное выражение для выполнения поиска изамена.

Почему Javascript здесь не выгоден?

Если вы используете JavaScript для такого рода вещей, это не кажется разумным, так как длинные документы преобразуются, в то время как пользователь уже может видеть содержимоеИ я не вижу причины, почему кто-то хотел бы сделать это с помощью JavaScript и накладывать бремя на клиентскую сторону на каждый запрос вместо изменения этого один раз на сервере .Это очень хороший пример чрезмерного проектирования . Другая поверхность, где могут появляться ошибки. Вам следует избегать таких ситуаций.

Если ваш дизайнер решит изменить CSS, ваши элементы H1 изменятся какхорошо. Но если дизайнер решит изменить имя класса CSS с content_title на что-то другое, ваши элементы H1 не будут следовать. Bно они бы тоже не следовали, используя JavaScript.Так что это практически то же самое, если просто сделать замену в файлах .

Лучшее решение

Открыть файл CSS и изменить код, который говорит: 

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

до 

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

Наименьший объем работы, который вы можете сделать.А когда дизайнер меняет стили, они будут изменены для обоих определений, поэтому вам не придется копировать стили в определение H1.Вуаля проблема решена.

2 голосов
/ 15 февраля 2011

Просто прикуси пулю. Насколько сложно запустить глобальный поиск и замену <h1> на <h1 class="content_title">?

Тот, кто написал <span class="content_title"></span>, должен быть .. образованным , что заголовки почти всегда должны быть <h[1..6]> тегами.

Невозможно создать простой тег <h1> для стилей, установленных в селекторе .content_title, без изменения CSS. Наименьшее изменение, которое вы могли бы сделать, это то, что было предложено @Sotiris, что очень мало.

Вы можете узнать текст этого ответа от .. где-то ;)

2 голосов
/ 15 февраля 2011

Я подозреваю, что проблема с стилями этого дизайнера не будет вашей последней. Я бы создал и управлял отдельным CSS-файлом, который назывался чем-то вроде «style_overrides.css». Убедитесь, что файл объявлен после оригинальных стилей. Затем скопируйте объявление .content-title в ваш новый файл и измените селектор так, чтобы он читал .content-title, H1.

Я знаю, что это не очень СУХОЙ , но это позволит вам переопределить множество ошибок (просто предположение), которые были сделаны в оригинальных стилях. Я полагаю, если бы вы справились с этой задачей, вы могли бы написать какой-нибудь бомбовый ASP-скрипт, который ищет в исходных файлах CSS предварительно определенные объявления и применяет необходимые изменения перед написанием нового файла CSS. Хотя это почти наверняка не стоит вашего времени ...

2 голосов
/ 15 февраля 2011

Если вы используете jquery, вы можете запустить что-то вроде: 

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

[править] Доброе намерение заменено на правильный ответ.Спасибо, Брайан!

...