Question

嘿，只是一个简单的问题，我使用了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;
}

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不应该是彼此的父/子，以便你的班级能够工作。

样式不同的标题迭代

2 个答案: