php - 仅适用于移动设备的 CSS，无需任何指示

Question

我正在尝试让显示在这些链接下方的 Sprite 根据 URL 的内容进行更改，因此当您单击“主页”链接并被定向到 index.php，现在菜单栏中的按钮有一个单独的 Sprite 。

有趣的是，每当我在移动设备上访问我的网站时，它都能很好地工作，但是当我在计算机上查看它时，它却不想工作。

这里是我的代码的总结:

<div id="nav">
    <span>
        <br><br>
        <?php
        $host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
        if (strpos($host, 'index.php') !== false) {
            echo "<span><a href='index.php'>Home</a></span>";
        } else {
            echo "<a href='index.php'>Home</a>";
        }
        ?>
    </span>  
</div>

配合相应的CSS:

span span a {
    display: block;
    background: url(../images/button_sprite_selected.png) no-repeat;
    height: 80px;
    width: 164px;
}

span a {
    display: block;
    background: url(../images/button_sprite.png) no-repeat;
    height: 80px;
    width: 164px;
}

这也是我在这里的第一篇文章，我对使用 PHP 进行编码还很陌生!让我知道是否有任何其他我必须包含的信息，或者我网站的 URL 是否有帮助。

谢谢!

Answer 1

我怀疑问题是因为 CSS 中的第二个“span a”导致选择器规则设置不正确。我会考虑使用类而不是依赖跨度。

为您希望更改的链接设置“事件”类是解决问题的好方法:

<div id="nav">
    <span>
    <br><br>
    <?php
    $host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
    if (strpos($host, 'index.php') !== false) {
        echo "<span><a class='active' href='index.php'>Home</a></span>";
    } else {
        echo "<a href='index.php'>Home</a>";
    }
    ?>
 </span>  
</div>

span span a.active {
    display: block;
    background: url(../images/button_sprite_selected.png) no-repeat;
    height: 80px;
    width: 164px;
}

span a {
    display: block;
    background: url(../images/button_sprite.png) no-repeat;
    height: 80px;
    width: 164px;
}