通过 class 或 id 将样式应用于所有元素

Question

我有问题。我在 html 中有一些 a、p 等标签。其中一些有类或ID。一切都很好，但我已经制作了一个页脚，其中还包含一些 p、a、h 标记等...如果我为页脚中的元素指定样式，则 html 中的所有相同元素都会采用这些样式。我尝试过制作 id+class 或页脚 #footer .footer p, h4 ... 我已将页脚设为 div，但没有任何效果。样式将应用于所有元素。 这是我的代码

 <header>

    <p>Ievgen</p>
    <nav>
        <a name="home"></a>
        <div class="clear"></div>
    <ul>
        <li><a href="#home"class='coollink'>Home</a></li>
        <li><a href="#aboutme" class="coollink" >About me</a></li>
        <li><a href="work.html" class="coollink" target="_self">Professional experience</a></li>
        <li><a href="publications.html" class="coollink">Publications</a></li>
        <li><a href="art.html" class="coollink" target="_blank">Art</a></li>
        <li><a href="#contact" class="coollink">Code</a></li>
        <li><a href="#contact" class="coollink">Contact</a></li>
</nav>
</ul>
</header>

<div class="footer">
        <hr>
        <h4>Write me</h4>
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href=""></a>
        <a href=""></a>
        <p>Copyright &copy; 2018. All Rights Reserved.</p>
        </div>



header{
    width: 80%;
    height: 50px;
    margin: 0 auto;
    background-color:  rgba(255,255,255,0.7);
    position: sticky;
    position: -webkit-sticky;
    top: 0; 
    z-index: 1;

}
header p {
    float: left;
    text-transform: uppercase;
    display: inline-block;
    font-weight: bold;
}

nav{
    float:  right;


}
 nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

nav li{
    display: inline-block;
    margin-left: 70px;
    padding-top: 17px;
}
nav a{
    text-decoration: none;
    color: black;
    text-transform: uppercase;
}


.footer{
    height: 200px;
    background-image: url('../images/footer.jpg');
    margin: 0;
    padding: 0;
    text-align: center;
    background-position: center;
 background-size: cover;
 display: inline-block;
 width: 100%;

}

.footer h4, a, p{
    margin: 0;
}

Answer 1

在 CSS 的最后一部分，你只是写错了。试试：

.footer h4, .footer a, .footer p {
 margin: 0;
}

我还应该指出，您不能只使用<div class="footer">，而只使用<footer>。那会是更好的 HTML5。

Answer 2

这里问题的根本在于向 HTML 标签添加样式。当您将样式添加到 标签 时，它将覆盖通过 类 应用的任何样式。

因此，如果您想要将样式应用于 HTML 元素的每个实例，请将样式应用于标签。

HTML：

<p>
  {* header contents... *}
</p>

CSS：

p {
  {* any styles here will apply to ALL <p> tags
}

如果您不希望将样式应用于每个实例，那么类应该是您的首选。

HTML：

<p class="paragraph">
  {* some styled text... *}
</p>

<p>
  {* some unstyled text... *}
</p>

CSS：

.paragraph {
  {* styles applied here will only apply to <p> tag with "paragraph" class *}
}