text-decoration：none根本不工作

Question

我正在尝试删除我的按钮div中的文本下划线但是无法正常工作，请告知我如何摆脱它。

任何帮助都非常感激。

代码：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
#topbar {
  display: block;
  width: 100%;
  height: 6%;
  background-color: #cc0000;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane {
  float: left;
  width: 10%;
  height: 94%;
  background-color: #8b9dc3;
  margin: 0;
  padding: 0px;
  box-shadow: 1px 1px 5px 1px #888888;
  text-decoration: none;
}
.btn {
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 13px;
  padding: 2px 0px 2px 5px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
}
.btn p {
  text-decoration: none;
}

＆＃13;

<div id="leftpane">


  <a href="url/post.php">
    <div class="btn">
      <p>Post a Bulletin</p>
    </div>
  </a>



</div>

＆＃13;

＆＃13;

＆＃13;

我尝试了各种方法来实现text-decoration: none，但没有一种方法可以使用，这就是为什么它现在在几个地方。

Answer 1

您需要在锚点（#leftpane a）上将text-decoration设置为none：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
#topbar {
  display: block;
  width: 100%;
  height: 6%;
  background-color: #cc0000;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane {
  float: left;
  width: 10%;
  height: 94%;
  background-color: #8b9dc3;
  margin: 0;
  padding: 0px;
  box-shadow: 1px 1px 5px 1px #888888;
}
.btn {
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 13px;
  padding: 2px 0px 2px 5px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
}
#leftpane a {
  text-decoration: none;
}

＆＃13;

<div id="leftpane">
  <a href="url/post.php">
    <div class="btn">
      <p>Post a Bulletin</p>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将text-decoration: none移到单独的声明中

#leftpane a {
  text-decoration: none;
}

这是因为那里的“a”会继承其默认样式，为了覆盖它们，你必须在标签级别更具体。

查看工作小提琴here

Answer 3

您需要一个更具体的选择器：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
#topbar {
  display: block;
  width: 100%;
  height: 6%;
  background-color: #cc0000;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane {
  float: left;
  width: 10%;
  height: 94%;
  background-color: #8b9dc3;
  margin: 0;
  padding: 0px;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane a {
    text-decoration: none;
}
.btn {
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 13px;
  padding: 2px 0px 2px 5px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
}
.btn p {
  text-decoration: none;
}

＆＃13;

<div id="leftpane">


  <a href="url/post.php">
    <div class="btn">
      <p>Post a Bulletin</p>
    </div>
  </a>



</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个

#leftpane > a {
text-decoration:none
}

text-decoration property is not inherited所以你需要在实际的锚元素上指定它，而不是它的父元素。

Answer 5

修改

指出，＆＃34;！important＆＃34;应该用来覆盖不可访问的css规则，否则特异性是要走的路

-----

试

.btn:first-child {
      text-decoration: none !important;
 }

或

 #leftpane a {
     text-decoration: none !important;
 }