html - 将 CSS 应用于 anchor 的类与通过父元素应用于 anchor

Question

<分区>

Answer 1

因为.fa默认css在你使用.fa class时先应用，影响了font-size:30px，所以使用a.fa 或使用 !important 覆盖默认 .fa 的字体大小

.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;
}

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