php - 仅适用于移动设备的CSS，没有任何要求这样做的CSS

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

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

这是我的代码摘要：

<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编码是相当新的！让我知道我是否还必须包含其他信息，或者我网站的网址是否有帮助。

谢谢！

最佳答案

我怀疑问题是由于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;
}

关于php - 仅适用于移动设备的CSS，没有任何要求这样做的CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27618273/