0

嘿只是一个简单的问题，我已经使用了 h1 和 h2 标签并在下面设置了两次样式

#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;
}
4

2 回答 2

1 
#feed h1, h2 {}

应该

#feed h1, #feed h2 {}

和

#contact-footer h1, h2 {}

应该

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

h1并且h2它们本身只是一般规则，这都是关于特异性的。

于 2013-07-02T15:04:53.163 回答
0

不，您可以多次设置它们的样式。我认为你的层次结构可能有问题。#feed 和 #contact-footer 不应该是彼此的父/子，才能让您的课程正常工作。

于 2013-07-02T14:57:51.653 回答