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

Question

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

Так что я это для заголовка:

Existing:

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

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

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

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

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

Update

Моего HTML, что я не могу изменить, это:

<div class=title>Hello</div> 

У меня есть новая таблица стили, что я должен осуществить, но у него есть стиль, но он работает только на :

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

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

Answer 1

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

div.title {} 

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

h2 > span {} 

или просто

h2 {} 

Answer 2

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

Answer 3

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

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

Answer 4

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

alt text http://sampsonresume.com/labs/firebug.JPG

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

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

h2 span { ... } 

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

h2 span, div.title { ... } 

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