Question

我在移动设备上遇到了一些css优先级问题。问题是css id选择器push-content未应用于body元素。奇怪的是，正在我的电脑上浏览 r。

代码无法用于移动设备：

/* space between content and navigation */
div #push-content {
  padding-top: 60px;
}

<body id="push-content">

在此之后适用于body元素：

<body style="padding-top: 60px;">

我觉得这不是唯一的方法。还有其他方法可以解决这个问题吗？

Answer 1

首先，你在id =“push-content”

之间有空格

将其更改为

id="push-content"

秒在将其应用于body标签时，您有div #push-content，因此将其更改为body #push-content

Answer 2

看起来你的css中有一个不正确的选择器。

div #push-content将选择ID为push-content的元素，该元素是div的子元素。因此，您无法将其应用于body。

改为使用：

#push-content {
  padding-top: 60px;
}

甚至更好：

.push-content {
  padding-top: 60px;
}

使用此处的类而不是id将允许您在多于一个元素上使用它。

Answer 3

你的选择器试图在div中找到#push-content，而不是名为#push content的div。删除它们之间的空间。

plus - Body不是div - 所以你可能需要body＃push-content而不是

Answer 4

这绝对是可怕的。我发现了这个问题。我的网站由wordpress提供支持。我使用了错误的链接。基本上，我是通过XAMP在我的本地PC上托管网站进行测试。我使用的函数bloginfo('stylesheet_url');给了我噩梦。样式表没有在我的手机上链接。它返回http://localhost:8080/wordpress/这是局域网上任何其他设备的错误链接所以我把IP放在那里，它就像一个魅力。我将其修改为http://192.168.1.8:8080/wordpress/ 192.168.1.8 是源/主机的IP（您可以通过在Windows上打开命令控制台找到它并写入“ipconfig”）

注意：您应该使用bloginfo('stylesheet_url');功能。我暂时删除了它，因为我在XAMP的帮助下通过LAN在其他设备上测试我的网站。

谢谢大家的帮助。我真的很感激。

id不适用于移动浏览器的HTML元素

4 个答案: