2017-02-09 12 views
-1

Я хочу использовать в своих CSS разных названиях/заголовках, с тем же шрифтом, но с разным размером шрифта и т.д. У меня есть это:Как использовать несколько заголовки CSS

#titulo1{ 
    font-family: 'Roboto', sans-serif; 
    font-size: 40px; 
    font-height:50px; 
    color: #ffffff; 
} 

#titulo2{ 
    font-family: 'Roboto', sans-serif; 
    font-size: 30px; 
    font-height: 40px; 
    color: #73bd34; 
} 

#titulo3{ 
    font-family: 'Roboto', sans-serif; 
    font-size: 20px; 
    font-height: 30px; 
    color: #5f9b16; 
} 

#titulo4{ 
    font-family: 'Roboto', sans-serif; 
    font-size: 13px; 
    font-height: 15px; 
    font-weight: bold; 
    color: #000000; 
} 

Теперь я хочу использовать некоторые титры к некоторым divs и другим к другим. Как это:

.slogan #titulo1{ 
... 
} 

.pesquisa #titulo3{ 
... 
} 

Но это не работает, я могу только сделать его работу, используя его в моем HTML файл, как это:

<div class="slogan" id="titulo1"> 

Да, я уже посетил эту страницу: http://www.w3schools.com/cssref/css_selectors.asp и до сих пор ничего

+0

Я предлагаю вам взглянуть на документацию по CSS селекторов: http://stackoverflow.com/documentation/css/611/selectors#t=201702091124578300889 –

+0

Вам нужно для использования классов вместо ids - идентификаторы должны быть уникальными. И если вы хотите изменить элемент с помощью класса слогана и идентификатора titulo1, вам нужно удалить пробел между селектором: '# titulo1.slogan' (я поменял порядок, так как я предпочитаю, чтобы идентификаторы приходили первыми, поскольку они имеют больший вес). [Это хорошая статья о специфике css] (https://css-tricks.com/specifics-on-css-specificity/) – Pete

ответ

0

Вы можете использовать селектор, который выбирает все элементы, которые идентификатор начинается с «título»

[id^="titulo"] { 
    font-family: 'Roboto', sans-serif; 
} 

#titulo1{ 
    font-size: 40px; 
    font-height:50px; 
    color: #ffffff; 
} 

#titulo2{ 
    font-size: 30px; 
    font-height: 40px; 
    color: #73bd34; 
} 

#titulo3{ 
    font-size: 20px; 
    font-height: 30px; 
    color: #5f9b16; 
} 

#titulo4{ 
    font-size: 13px; 
    font-height: 15px; 
    font-weight: bold; 
    color: #000000; 
} 

Определение .slogan #titulo1 не имеет смысла, поскольку идентификатор является уникальным идентификатором, поэтому #titulo1 означает то же самое.

в любом случае селектор конкретного элемента с несколькими классами, например. <div class="class1 class2"> будет выглядеть .class1.class2 (без пробела между именами классов) или div.class1.class2

0

Его пространство в css, что затрудняет его. Давайте посмотрим:

Обратите внимание, это:

.slogan #titulo1{ 
     color:red; 
    } 

Это будет работать для follwoing HTML структуру

<div class="slogan"> 
    <div id="titulo1"> 
    </div> 
</div> 

Теперь Обратите внимание это:

.slogan#titulo1{ 
    color:red; 
} 

Это будет работать для follwoing HTML структуру

<div class="slogan" id="titulo1"> 

</div> 

Вы заметили пространство в CSS, если положить, что пространство означает, что они находятся в другой элемент

0

Используйте следующие. Надеюсь, что ваша проблема будет решена :)

<div class="slogan"> 
    <div id="titulo1"> 
    -------- 
    -------- 
    </div> 
</div> 

 Смежные вопросы

  • Нет связанных вопросов^_^