укладки различных итерации заголовков

Question

Эй просто быстрый вопрос, я использовал h1 и h2 тег и стиль их дважды под

#feed h1, h2{} 

и

#contact-footer h1, h2{} 

но свойства от каждого DIV в настоящее время перепутали, можете ли вы только заголовок заголовков один раз?

Херес CSS (соответствующая часть), и дивы не родитель/ребенок друг с другом

#feed 
{ 
width:100%; 
height:540px; 
margin:0 auto; 
background:rgba(75,75,75,1); 
border-bottom:5px dashed rgba(50,50,50,1); 
} 
#feed h1, h2 
{ 
background:rgba(50,50,50,.5); 
float:left; 
position:absolute; 
top:503px; 
left:20px; 
} 
#feed-bar 
{ 
float:left; 
position:absolute; 
width:200px; 
height:14px; 
border-radius:10px; 
background:rgba(50,50,50,.5); 
box-shadow:0 0 5px rgba(50,50,50,.5); 
top:503px; 
left:20px; 
} 
#feed-ball 
{ 
float:left; 
position:absolute; 
width:20px; 
height:20px; 
border-radius:10px; 
background:rgba(75,75,75,.7); 
box-shadow:0 0 5px rgba(100,100,100,.7); 
animation:progress 10s infinite; 
-webkit-animation:progress 10s infinite; 
animation-timing-function: linear; 
-webkit-animation-timing-function: linear; 
} 
@keyframes progress 
{ 
from {top:500px;left:20px;} 
0% {top:500px;left:20px;opacity:0;} 
5% {opacity:1;} 
95% {opacity:1;} 
100% {top:500px;left:200px;opacity:0;} 
} 
@-webkit-keyframes progress 
{ 
0% {top:500px;left:20px;opacity:0;} 
5% {opacity:1;} 
95% {opacity:1;} 
100% {top:500px;left:200px;opacity:0;} 
} 
#feed img 
{ 
width:960px; 
height:auto; 
overflow:hidden; 
position:absolute; 
} 
#feed-1, #feed-2, #feed-3, #feed-4, #feed-5 
{ 
opacity:0; 
position:absolute; 
animation:feed-scroll 50s infinite; 
-webkit-animation:feed-scroll 50s infinite; 
} 
#feed-2 
{ 
animation-delay:10s; 
-webkit-animation-delay:10s; 
} 
#feed-3 
{ 
animation-delay:20s; 
-webkit-animation-delay:20s; 
} 
#feed-4 
{ 
animation-delay:30s; 
-webkit-animation-delay:30s; 
} 
#feed-5 
{ 
animation-delay:40s; 
-webkit-animation-delay:40s; 
} 
@keyframes feed-scroll 
{ 
0% {opacity:0;z-index:100;} 
1% {opacity:1;} 
20% {opacity:1;} 
22% {opacity:0;z-index:0;} 
40% {opacity:0;} 
60% {opacity:0;} 
80% {opacity:0;} 
100% {opacity:0;} 
} 
@-webkit-keyframes feed-scroll 
{ 
0% {opacity:0;z-index:100;} 
1% {opacity:1;} 
20% {opacity:1;} 
22% {opacity:0;z-index:0;} 
40% {opacity:0;} 
60% {opacity:0;} 
80% {opacity:0;} 
100% {opacity:0;} 
} 
#contact-footer 
{ 
width:100%; 
height:auto; 
background:rgba(35,35,35,1); 
} 
#contact-footer h1, h2 
{ 
color:rgba(200,200,200,1); 
text-shadow:0 0 3px black; 
text-align:center; 
padding:10px; 
margin:0; 
} 

Answer 1

#feed h1, h2 {} 

должен быть

#feed h1, #feed h2 {} 

и

#contact-footer h1, h2 {} 

должен быть

#contact-footer h1, #contact-footer h2 {} 

h1 и h2 на их собственных являются только общими правилами, это все о специфичность.

Answer 2

Нет, вы можете стилизовать их несколько раз. Я думаю, что может быть проблема с вашей иерархией. #feed и # contact-footer не должны быть родителями/дочерними элементами друг друга, чтобы ваши классы работали.