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 *}
}

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

2 个答案: