文字修饰：根本就没有

Question

不工作我想我的按钮，专区内删除的文字下划线，但不能得到任何工作，请指教我怎样才能摆脱它。

任何帮助非常感谢。

代码：

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

<div id="leftpane"> 
 

 

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

 

 

 
</div>

我曾尝试推行text-decoration: none的各种方式，但没有工作过，这就是为什么它现在是在几个地方。

Answer 1

您需要设置文本装饰没有对锚（#leftpane a）：

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

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

Answer 2

您需要更具体的选择：

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

<div id="leftpane"> 
 

 

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

 

 

 
</div>

Answer 3

你会想你的text-decoration: none移动到一个单独的声明

#leftpane a { 
    text-decoration: none; 
} 

这是因为“一”下，将有继承其默认样式，以覆盖它们，你必须要在标签更具体水平。

见工作小提琴here

Answer 4

试试这个

#leftpane > a { 
text-decoration:none 
} 

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

Answer 5

编辑

如指出， “！重要” 应当用于覆盖人迹罕至的CSS规则，否则特异性去

----- 

尝试

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

或

方式

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