【发布时间】：2018-04-05 09:38:05
【问题描述】：
所以我一直在我的网站上工作，我注意到在 Google Pixel 手机上我的主屏幕上有一些截断词。所以我决定尝试完全隐藏它们，除非屏幕尺寸足够大，可以完全看到它们。这是我的网页供参考，这是我应该影响网站的规则。
/*
----Fix for Title Screen on Pixel----
*/
@media screen and (min-width: 481px) and (max-width: 615px) {
.nivo-caption {
bottom:25% !important;
}
}下面是它在特定设备屏幕尺寸上的操作截图。 Example
因此，如果您转到该页面并检查该框，您会看到我在上面发布的媒体规则已经存在于 responsive.css 中。如果您对其进行编辑并将底部：10% 变为底部：25%，您将看到我的问题已解决。唯一的问题，没有解决。我将此 CSS 添加到 custom.css 中，这是最后一个加载的样式，我也将它放在 custom.css 的底部。它仍然没有奏效。它总是使用来自 responsive.css 的原始样式。即使使用 !important 标记，您也可以看到它什么也不做。
现在我知道你在想什么，只需编辑 responsive.css。我知道容易修复，但我无权访问该文件。它也不应该这样，我应该能够覆盖我的 custom.css 中的样式，因为它是最后加载的，对吗？请告诉我我在这里的某个地方错了，所以我可以解决这个问题！
【问题讨论】：
-
您能否证明最小和最大宽度在 Google 像素大小范围内？屏幕密度可能会欺骗您的@media 规则。
-
可能是这样，但问题仍然是当屏幕是那个尺寸时我无法编辑这个类。我只是使用谷歌浏览器检查工具来回拖动屏幕大小。
-
使用 Chrome 开发人员工具，您应该能够查看您的样式是否在其他地方被覆盖。您可以尝试增加选择器的特异性。
-
我不知道具体该怎么做，我已经看过并发现它不应该被覆盖，但它是。我将如何提高特异性？不知道会有什么不同，我已经直接选择类文件了。
-
请参阅this resource 了解 CSS 特性。例如：
div .foo {color:red}比.foo {color:blue}更具体。您可以检查页面的 DOM 结构，看看是否可以应用比.nivo-caption{}更具体的选择器，例如.foo .bar .nivo-caption{}
标签： css wordpress overriding media responsive