text-decoration：none;没有做任何事情

时间：2013-08-27 16:52:07

标签： html css

我试图将链接显示为白色，没有下划线。文本颜色正确显示为白色，但蓝色下划线固执地持续存在。我试过text-decoration：none;和文字装饰：无！重要;在CSS中删除链接下划线。两者都没有。

所有代码：

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Forum</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>

<body class="body">
<div class="container">
<div class="row-fluid">
<div class="span4 box">
<div class="border5">Categories</div>
<div class="border_box category_cat">NETWORK ANNOUNCEMENTS</div>
<a href="http://localhost/forum/view_category.php?cid=3">
<li class="border3">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Hide And Seek<span class="label label-info left">0</span></li></a>
<div class="border_box category_cat">GENERAL</div>
<div href="" class="border text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Questions<span class="label label-info left">0</span></div>
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Bugs<span class="label label-info left">0</span></div>
<div class="border_box category_cat">HIDE AND SEEK</div>
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> General Discussions<span class="label label-info left">0</span></div>
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span>  Suggestions And Feedback<span class="label label-info left">0</span></div>
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Bugs<span class="label label-info left">0</span></div>
<div class="border_box category_cat">OFF TOPIC</div>
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Minecraft<span class="label label-info left">0</span></div>
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span>  Non-Gaming<span class="label label-info left">0</span></div>
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Gaming<span class="label label-info left">0</span></div>
<div class="border_box category_cat">REPORTS AND APPEALS</div>
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Player Reports<span class="label label-info left">0</span></div>
<div href="" class="border6 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Appeals<span class="label label-info left">0</span></div>
</div>
<div class="span8">
<h3>My First Forum!</h3>
<hr />
<?php
if (!isset($_SESSION['uid'])) {
    echo "<form action='login_parse.php' method='post'>
    Username: <input type='text' name='username' />&nbsp;
    Password: <input type='password' name='password' />&nbsp;
    <input type='submit' name='submit' value='Log In' />
    ";

} else {
    echo "<p>You are logged in as ".$_SESSION['username']." &bull; <a href='logout_parse.php'>Logout</a>";
}
?>

<hr />
<div id="content">
<?php
include_once("connect.php");
$sql = "SELECT * FROM topics ORDER BY topic_date ASC";
$res = mysql_query($sql) or die(mysql_error()); 
$topics='';
if (mysql_num_rows($res) > 0) {
    while ($row = mysql_fetch_assoc($res)) {
        $id = $row['id'];
        $title = $row['topic_title'];
        $cid = $row['category_id'];
        $topics .= "<a href='view_topic.php?cid=".$cid."&tid=".$id."' class='cat_links'>".$title."<font size='-1'></font></a>";
    }
    echo $topics;
} else {
    echo "<p>There are no topics available yet.</p>";
}
?>
</div>
</div>


</body>
</html>
</div>
</div>

所有css代码：

.cat_links {
    display: block;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #000000;
    margin-bottom: 5px;
    background-color: #cccccc;
    color: #000000;
}
.cat_links:hover {
    background-color: #dddddd;
}
.border {
    border-top: 1px solid #DDD;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    width: 300px;
    height: 33px;
    background-color: #FFF;
    color: #0088cc;
    text-decoration: none;
}
.text {
    color: #0088cc;
    text-decoration: none;
}
.border1 {
    border-bottom: 1px solid #DDD;
    display: block;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    width: 300px;
    height: 33px;
    color: #0088cc;
    background-color: #FFF;
    text-decoration: none;
}
.border2 {
    display: block;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    width: 300px;
    height: 33px;
    color: #0088cc;
    text-decoration: none;
    background-color: #FFF;
}
.category_cat {
    margin: 10px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    color: inherit;
    text-rendering: optimizelegibility;
    font-size: 17.5px;
    color: #888;
    margin-top: 0px;
    margin-bottom: 0px;
        background-color: #FFF;
}
.border3 {
    display: block;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    background-color: #FFF;
    text-decoration: none;
}
.left {
    float: right;
}
.label-info:hover {
    background-color: #2d6987;
}
.label:hover {
color: #ffffff;
text-decoration: none;
}
.box_cat {
    width: 300px;
    height: 33px;
}
.border3:hover {
    background-color: #F6F6F6;
    text-decoration: none;
}
.border:hover {
    background-color: #F6F6F6;
}
.border1:hover {
    background-color: #F6F6F6;
}
.border2:hover {
    background-color: #F6F6F6;
}
.border6:hover {
    background-color: #F6F6F6;
}
.border_box {
    display: block;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    width: 300px;
    height: 33px;
    text-decoration: none;
    color: #888;
        background-color: #FFF;
}
.border5 {
    border-bottom: 1px solid #DDD;
    display: block;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    width: 300px;
    height: 33px;
    color: #0088cc;
    text-decoration: none;
    color: #333;
    background-color: whiteSmoke;
    border-radius: 4px 4px 0 0;
}
.body {
    background-color: #C12727;
}
.box {
    background-color: #F9F9F9;
    border-radius: 4px;
    box-shadow: 0 0 0 transparent;
    margin-bottom: 9px;
}
.border6 {
    border-radius: 0 0 4px 4px;
    border-bottom: 1px solid #DDD;
    display: block;
    float: none;
    font-weight: 700;
    padding: 6px 15px;
    text-align: left;
    width: 300px;
    height: 33px;
    color: #0088cc;
    background-color: #FFF;
    text-decoration: none;
}
.span4 {
    margin-top: 10px;
}
.border3 a { 
    text-decoration: none;
    }

5 个答案:

答案 0 :(得分：2)

您的HTML无效（您无法在列表项周围包装锚点），但此CSS将解决您的问题：

a {
    text-decoration: none;
}

jsFiddle example

答案 1 :(得分：1)

您是否尝试过直接设置链接样式？

a {
 text-decoration: none;
}

或

.border3 a { 
text-decoration: none;
    }

如果您只想在这些链接上使用该属性

答案 2 :(得分：1)

只需使用

a{text-decoration: none !important;}

答案 3 :(得分：0)

您正在将text-decoration: none应用于列表而非链接。 它应该是：

a {
text-decoration: none;
}

答案 4 :(得分：0)

anchor元素应该在List元素中：

<li class="border3"><a href="#">Something</a></li>

不是相反。

然后你可以像Dikeneko所说的那样应用CSS 

.border3 a {
  text-decoration: none;
}
相关问题
最新问题