html - テキスト装飾: なし; 何もしていません

Question

下線なしでリンクを白で表示しようとしています。テキストの色は白として正しく表示されますが、青い下線が頑固に残っています。text-decoration: none; を試しました。および text-decoration: none !important; 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;
    }

score 2 · Accepted Answer

あなたの HTML は無効です (リストアイテムをアンカーで囲むことはできません) が、この CSS は問題を解決します:

a {
    text-decoration: none;
}

jsFiddle の例

score 1 · Accepted Answer

一般的にリンクを直接スタイリングしようとしましたか？

a {
 text-decoration: none;
}

または

.border3 a { 
text-decoration: none;
    }

特にそれらのリンクでそのプロパティのみが必要な場合

html - テキスト装飾: なし; 何もしていません

5 に答える 5

Related

Reference