css - 当父级是 anchor 时，如何删除 flex 子级上的文本装饰下划线？

Question

当父级是 anchor 时，我试图删除 flex 子级的文本装饰。我已经尝试了以下所有代码，但它根本不起作用。我创建了一个 jsFiddle，并且下划线始终显示而不是悬停。在我的 WordPress 安装中，它只在悬停时显示。我真的不知道该怎么办!感谢您的帮助!

提前致谢!!!

    .fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover, 
.fleximagebox_link a:hover, .fleximagebox_link:hover a, 
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a, 
a .image_background:hover, .image_background.fleximagebox_link a:hover, 
a .image_background.fleximagebox_link:hover {
text-decoration: none!important; 
}

这是解释我所说内容的 jsFiddle:https://jsfiddle.net/Clare12345/th60mde3/2/

Answer 1

这将去掉你的 fiddle 中的下划线 .flexbox_images a { text-decoration: none; }

至于它为何出现在您的网站上，我们只能猜测您是否不包含代码或指向您网站的链接。但是您可以尝试将该行更改为 .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }

.flexbox_images a {
  text-decoration: none;
}

.main_box {
  background: white;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.main_box .flexbox_images {
  color: white;
  width: 100%;
  padding: 0px;
  overflow: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flexbox_images a {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.image_background {
  height: 250px;
  margin: 0 auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 101%;
}

.image_background_left {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://pipsum.com/350x240.jpg);
  justify-content: flex-end;
  margin-right: -1px;
}

.image_background_right {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://pipsum.com/350x240.jpg);
  justify-content: flex-start;
  margin-left: -1px;
}

.fleximagebox_link {
  font-size: 28pt;
  background: rgba(255, 255, 255, 0.85);
  color: #000!important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 130px;
}

.image_background_left .fleximagebox_link {
  justify-content: flex-end;
  padding-left: 35px;
}

.image_background_right .fleximagebox_link {
  justify-content: flex-start;
  padding-right: 35px;
}

.image_background_right .fleximagebox_link p {
  font-size: 28pt!important;
  color: #000!important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin-bottom: 0px;
}

.main_black_bar {
  width: 3px;
  background: #000;
  height: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: -1px;
}

.image_background_left .main_black_bar {
  margin-left: 35px;
}

.image_background_right .main_black_bar {
  margin-right: 35px;
}

<div class="main_box">

  <div class="flexbox_images">
    <a href="">
      <div class="image_background image_background_left">
        <div class="fleximagebox_link">Buy
          <div class="main_black_bar">&nbsp;</div>
        </div>
      </div>
    </a>
    <a href="">
      <div class="image_background image_background_right">
        <div class="fleximagebox_link">
          <div class="main_black_bar">&nbsp;</div>Sell</div>
      </div>
    </a>
  </div>

</div>