styling different iterations of headings

Question

Hey just a quick question, I have used the h1 and h2 tags and styled them twice under

#feed h1, h2{}

and

#contact-footer h1, h2{}

but the properties from each div are being mixed up, can you only style headings once?

heres the css(the relevant part), and the divs are not parent/child to each other

#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 {}

should be

#feed h1, #feed h2 {}

and

#contact-footer h1, h2 {}

should be

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

h1 and h2 on their own are just general rules, it's all about specificity.

Answer 2

No you can style them multiple times. I think there could be a problem with your hierarchy. The #feed and #contact-footer should not be parent/child of each other for your classes to work.