Присвоение класса CSS элементу

Question

Предполагая, что я хотел бы атрибут text-shadow: green; для каждого элемента <h2>, проходящего внутри элемента с классами .dark и ux-banner, какой код CSS достигнет этого?

<div class="dark ux-banner"> 
     <div class="the attributed classes of this element will vary"> 
      <h2>TARGET THIS ELEMENT 
      </h2> 
     </div> 
</div> 

Как и в приведенном выше примере <h2> элемента будет завернут в <div> с различными классами, приписанных к нему.

Что бы лучший способ применить text-shadow: green; свойство к <h2> элементу при посылающей в элементах, которые имеют .dark и ux-banner классы, приписываемые без ссылки на <div> непосредственно вокруг <h2> элемент

Answer 1

Я считаю, что вы» повторно ищет:

.dark.ux-banner h2 { 
    text-shadow: green; 
} 

Это означает, что: «Установить text-shadow: green на всех h2 элементов, которые являются потомками элемента с и классы dark и ux-banner.

С другой стороны, если вы хотите быть несколько специфична: (. Только для h2 элементов внутри div элементов в пределах .dark.ux-banner элементов)

.dark.ux-banner div h2 { 
    text-shadow: green; 
} 

Или гипер-конкретны:

.dark.ux-banner > div > h2 { 
    text-shadow: green; 
} 

(относится только к h2 элементам, которые являются direc т дети из div элементов, которые являются прямыми потомками из .dark.ux-banner элементов.)

Ключа немного выше действительно что .dark.ux-banner (без пробелов) означает «элемент с как из этих классов.» Остальное - только потомки или дочерние комбинаторы.

Answer 2

.dark.ux-banner h2 { text-shadow:green; } 

http://jsfiddle.net/YjGhw/

Answer 3

Вам потребуется

.dark.ux-banner h2{ 
    text-shadow:green; 
} 

Что это делает выбирает элементы, которые имеют класс .dark затем проверяет, если он имеет класс .ux-banner затем выбирает все h2 внутри этого

Answer 4

демонстрация http://jsfiddle.net/tFScD/2/

 <div class="demo"> 
     <div class="the attributed classes of this element will vary"> 
     <h2>TARGET THIS ELEMENT 
      </h2> 
      </div> 
     </div> 


    .demo div h2{ 
     text-shadow:2px 2px green; 
    } 

Answer 5

Это просто.Просто используйте следующее:

.dark.ux-banner h2 { 
    text-shadow:green; 
} 

Это означает, что каждый элемент h2 внутри элемента с этими классами будет иметь text-shadow:green propperty независимо от того, если h2 элемента находится внутри div или нет.

<div class="dark ux-banner"> 
    <div class="the attributed classes of this element will vary"> 
     <h2> 
      TARGET THIS ELEMENT 
     </h2> 
    </div> 
</div> 

or 

<div class="dark ux-banner"> 
    <h2> 
     TARGET THIS ELEMENT 
    </h2> 
</div> 

will work the same ;) 

Answer 6

.dark.ux-banner h2{ 
    text-shadow:0 0 4px green; 
} 

разметки

<div class="dark ux-banner"> 
     <div class="the attributed classes of this element will vary"> 
      <h2>TARGET THIS ELEMENT 
      </h2> 
     </div> 
</div> 

демо: http://jsfiddle.net/cQcbp/