将CSS应用于锚点的类与通过父元素应用于锚点

Question

我正在尝试将样式应用于“ .fa {}”类，但它看起来与将样式应用于“ #contact a {}”的情况不同

/*
.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}
*/

#contact>a {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="contact">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-google"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-youtube"></a>
  <a href="#" class="fa fa-instagram"></a>
</section>

Answer 1

这是因为在使用.fa时首先应用.fa class默认的CSS，其影响是font-size:30px，所以请使用a.fa或覆盖默认{{1}的字体大小}

.fa using !important

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}
*/

a.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

Answer 2

您可以简单地将CSS写在超棒的CSS之下。

For example -

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
/*
.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}
*/

#contact>a {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

    </style>
    <section id="contact">
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-google"></a>
      <a href="#" class="fa fa-linkedin"></a>
      <a href="#" class="fa fa-youtube"></a>
      <a href="#" class="fa fa-instagram"></a>
    </section>