为什么body class压倒footer html

我很好奇为什么第二种颜色会被第一种颜色覆盖？有没有解决这个问题的方法是不添加!important或将它包装在body类中？为什么body class压倒footer html

body.football h3 { 
    color: #a07a40; 
} 

footer h3 { 
    color: white; 
}

来源

2014-09-30 Mike Flynn

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ – dfsq 2014-09-30 20:06:22

它正在被覆盖，因为css将使用最具体的选择器通过任何其他选择器。

要解决此问题，您将需要使用!important标志或更改页脚选择器以更具体，最简单的方法是使用ID。

为例：

#footer h3{ 
    color: white; 
} 

<footer id='footer'><h3></h3></footer>

来源

2014-09-30 20:02:27 Phaeze

层叠样式表去由分层方案，如果两个选择器存在靶向相同的元件。更具体的将优先。

但是，你的身体可能不应该像这样有一个类，就像一个最佳实践一样。这是乞讨头痛。

您的选择：

快速和肮脏的，你可以用后代选择>指定直接子。例如：

body.football > h3 { 
    color: #a07a40; 
} 

footer > h3 { 
    color: white; 
} 

<body class="football"> 
    <h3>Football is the Bees Knees</h3> 
    <footer> 
     <h3>Hi Ma Hi Pa</h3> 
    </footer> 
</body>

或者，根据您的OP，你也可以换一个部分或DIV的主体内容和应用样式到，IE：

section#football h3 { 
    color: #a07a40; 
} 

footer h3 { 
    color: white; 
} 

<body> 
    <section id="football"> 
     <h3>Football Yo</h3> 
    </section> 
    <footer> 
     <h3>Yo Football</h3> 
    </footer> 
</body>

编辑：我要补充的是，这两个元素之间的空白空间意味着你将要命中所有父元素的后代元素。

来源

2014-09-30 20:04:25

CSS喜欢更偏爱更具体的声明而不是更具体的声明。没有看到伴随的HTML，可能有点难以确定，但这很可能是因为你的body.football声明更具体。

来源

2014-09-30 20:04:39

在writed代码或css结构上有html错误。

HTML：

<body> 
    <div class="football"> 
     <h3>ho</h3> 
    </div> 
    <footer> 
     <h3>test</h3> 
    </footer> 
</body>

CSS：上Fiddle

body.football h3 { 
    color: #a07a40; 
} 

footer h3 { 
    color: red; 
}

实施例。

或者如果足球是在页脚部分，那么你需要上课。

footer h3 { 
    color: red; 
} 

footer .football h3 { 
    color: #a07a40; 
}

Fiddle

来源

2014-09-30 20:47:15 Foxsk8

为什么body class压倒footer html

回答

相关问题