簡単な質問ですが、h1 タグと h2 タグを使用して、下に 2 回スタイルを設定しました。
#feed h1, h2{}
と
#contact-footer h1, h2{}
しかし、各 div のプロパティが混同されています。見出しのスタイルを一度だけ設定できますか?
ここにcss(関連部分)があり、divは互いに親子ではありません
#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;
}