Почему мой CSS-класс с малыми шапками не учитывается?

Question

Я добавил этот CSS класс:

.beanies { 
    font-variant: small-caps; 
} 

я называю это из пары мест в сочетании с другим классом, пытаясь это как так:

<p class="coolPools beanies">LICENSE #764014</p> 

... и это:

<h3 class="statelyPresence, beanies">NEW POOL LAW REQUIRES IMMEDIATE ACTION AT ALL APARTMENT AND CONDOMINIUM POOLS AND SPAS</h3> 

(IOW, с разделительной запятой между двумя классами, которые я применяю к элементу)

... и ни в одном случае текст не отображается в маленьких шапках.

Что я делаю неправильно?

Answer 1

Он работает, и вы не ошибаетесь. Но это не видно, потому что у вас есть все заглавные буквы.

Написать это:

.beanies { 
    font-variant: small-caps; 
    text-transform: lowercase; 
} 
.beanies:first-letter { 
    text-transform: uppercase; 
} 

Fiddle here.

Answer 2

капительные означает, что строчные буквы превращаются в несколько небольших вариаций заглавных букв. Прописные буквы остаются неизменными. Поскольку у вас есть только буквы в верхнем регистре, вы не видите различий.

Try:

<h3 class="statelyPresence beanies">New pool law requires immediate action at all apartment and condominium pools and spas</h3> 

Демо: http://jsfiddle.net/Mn48Q/

В целом цель состоит в том, что вы пишете HTML «нормально» и использовать CSS, чтобы применить стиль текста, в том числе в верхний регистр все слова, когда это необходимо.

(примечание к стороне: в списках классов нет запятых.)