php - 使用 PHP 的 CSS 主动导航突出显示。下划线有效,颜色无效。为什么?

标签 php html css colors text-decorations

我创建了一个事件导航栏,它突出显示了您当前正在使用 PHP 的页面的链接。我的目标是使链接显示为带下划线且颜色不同。下划线有效,但颜色没有改变。

我已经将 .on 类(PHP 将激活的类)定位在其他适用的 css 样式之后,所以我认为没有任何冲突。我什至尝试使用 !important 来查看是否有任何影响,但遗憾的是没有。

标题.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
    <title><?php echo "LWM Marketing"; ?></title>
    <link rel="stylesheet" type="text.css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
    <?=@$css;?>
</head>
<body>
    <div class="wrapper">
        <header>
            <a class="header-logo" href="index.php"><h1 id="main-logo">LWM PR &amp; Comms</h1></a>
                <ul class="nav">
                    <li class="<?php if ($section == "index") { echo "on";} ?>"><a href="index.php">About</a></li>
                    <li class="<?php if ($section == "services") { echo "on";} ?>"><a href="services.php">Services and Previous Work</a></li>
                    <li class="<?php if ($section == "contact") { echo "on";} ?>"><a href="contact.php">Contact</a></li>
                </ul>
        </header>
        <div id="content">

索引.css

#content>*{
width:300px;

#content{
height:1025px;

h2{
font-family: 'Special Elite', helvetica, arial, verdana, sans-serif;
padding-left: 15px;
position: relative;
top:20px;

#linkedin{
position: relative;
top:30px;
left:5px;

#logo-cloud{
position: relative;
left:380px;
top:-150px;
width:600px;

#main-blurb{
font-family: 'Raleway', helvetica, arial, sans-serif;
font-size: 18px;
padding-left: 15px;
position: relative;
top: -125px;
width:600px;

#main-blurb p{
    margin: 0px 0px 40px 40px;
    text-indent: 15px;
    width:600px;

#main-blurb p:last-child{
text-align: center;
font-size: 24px;

#divider{
width:960px;
position: relative;
top:-125px;
left:12px;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;

#twitter-timeline{
position: relative;
top:-580px;
left:682px;

footer{
position: relative;
top:-30px;

.hidden{
display:none;

style.css (with the class that the PHP activates)

/* General Styling */

body{
font-family: 'Raleway', helvetica, arial, verdana, sans-serif;
background-image:url("images/paper.png");
}

.wrapper{
width:960px;
margin: auto;

a {
color:#000000;
text-decoration:none;
}

a:hover{
color:#434991;
}

a:active{
color:#FF9436;
}



/* Logo (Header) */

.header-logo{
display:block;
width:247px;
height:111px;
text-indent:-9999px;
background: url("images/logo.gif") no-repeat;
margin:15px 0px 10px 15px;
float:left;
position:relative;
left:40px;

/* Main-Nav */


.nav li{
list-style-type: none;
display:inline-block;
font-size: 23px;
margin-top:90px;
float:left;
position:relative;
left:25px;
top:-12px;

.nav a{
font-family: 'Special Elite', sans-serif;
padding-top:5px;
border-left: 1px dotted #878787 ;
padding:2px 5px 0px 30px;

.nav li:first-child a { 
border: 0; 

.on{
text-decoration:underline;
color:#FF9436;

/* Footer */


footer{
font-family: 'Special Elite', sans-serif;
width:100%;
float:left;

footer p{
display:inline;

footer div{
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;

footer div li{
list-style-type: none;
display: inline-block;
font-size: 15px;
margin-left: 80px;

footer div li p{
font-size: 12px;

有人能看出为什么颜色属性没有影响吗?它是被我没有注意到的东西覆盖了,还是有其他我完全忽略的东西?

谢谢。

最佳答案

您是否设置了“.on a”的样式,这将是必需的。

关于php - 使用 PHP 的 CSS 主动导航突出显示。下划线有效,颜色无效。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23742819/

相关文章:

css - 全屏旋转 slider (wordpress)下方有一个空白(边距)

javascript - 当菜单栏固定在屏幕顶部时垂直滚动跳转

php - 从一台服务器到另一台不同服务器的远程数据库连接

在 Windows 7 上安装 TYPO3 6.2.2 时,PHP OpenSSL 扩展不起作用

php - 如何跟上每日变化的 RSS 提要?

html - 响应式 CSS 标题 |鼠标悬停在图像上

html - Bootstrap 3字形图标在悬停时显示文本

css - 模态对话框后面的暗淡背景是否有名称?

php - file_get_contents 默认使用哪个 HTTP 版本?

javascript - 使用 mailto URL 将附件添加到新的 Outlook 电子邮件