пытаясь сопоставить класс CSS с существующим элементом

Question

Мой HTML не может быть изменен, поэтому мне нужно сопоставить новую таблицу стилей CSS с существующими элементами на странице.

Итак, у меня есть это для заголовка:

Существующий:

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

Мой новый CSS для этой страницы, имеет новые CSS и разметку, но HTML выглядит так:

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

мне нужно, чтобы первый фрагмент выглядел точно так же, как и нижний <h2> фрагмент.

Как я могу сделать это без изменения HTML?

Обновление

Мой HTML, который я не могу изменить, это:

<div class=title>Hello</div>

У меня есть новая таблица стилей, которую я должен реализовать, но у нее есть стиль, но он работает только на:

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

Поэтому мне нужно изменить поведение заголовка класса, чтобы имитировать вывод того, что делает <h2><span>.

Answer 1

Ах, вы хотите, чтобы .title напоминал h2 span, а не наоборот. Мой совет для вас - загрузить Firebug для firefox (при условии, что вы используете firefox) и осмотреть ваш элемент h2, чтобы увидеть, какие стили он имеет в настоящее время, и какие селекторы для него уже могут существовать. *

_{(источник: sampsonresume.com )}

Если у вас нет Firefox, вы можете получить IEDeveloperToolbar для Internet Explorer или использовать встроенный Chrome Inspector, если вы используете 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 */
}

Answer 2

Где новый CSS определяет следующее правило:

h2 span { ... }

Обновите его, чтобы добавить старую разметку:

h2 span, div.title { ... }

Это будет применять все стили, которые применяются к диапазону, который находится внутри h2, к div.

Answer 3

h2 span будет работать нормально, если больше ничего не соответствует этому селектору. Убедитесь, что вы используете таблицу стилей сброса, чтобы вы не получили глупых стилей из браузера для <h2>.

Answer 4

Вы можете даже назначить оба селектора одной и той же группе:

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

Answer 5

где вы использовали

div.title {}

использование

h2 > span {}

или просто

h2 {}