时间戳

首页 > 解决方案 > 将 CSS 应用于锚的类与通过父元素应用于锚

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

问题描述

我正在尝试将样式应用于但当我尝试将样式直接应用于类“.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>

标签： htmlcss

解决方案

这是因为.fa默认css在你使用时首先应用.fa class，它的影响font-size:30px，所以使用a.fa或覆盖默认的字体大小.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;
}
<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>

推荐阅读