移动设备上未应用CSS修改

[Richie (Richie Rich)]

我很想知道是否有人能帮我处理一些 CSS 问题。

我一直在关注 Making custom CSS changes on your site 指南，我所做的更改在桌面端生效，但在移动端却无效。

在这个例子中，我想隐藏用户个人资料页面和用户个人资料卡中的“位置”信息。

我在 CSS > Common 中应用了以下代码：

/* Hide the User Location from their public profile page */
.user-profile-location {
  display: none;
}
/* Hide the User Location from their user card */
.user-card .location-and-website .location {
  display: none;
}

在 macOS 笔记本电脑的 Safari 和 Chrome 上测试，两者都已隐藏：

在 iPhone 的 Safari 和 Chrome 上测试，两者仍然非常明显

如上所述，这是多个浏览器上的情况。

同样，我也使用此 CSS 来隐藏其公共个人资料中的一些自定义用户字段：

/* Hide the social media platforms from the lower part of their public profile page */
.instagram, .tik-tok, .facebook, .you-tube, .x-\\(twitter\\), .vimeo {
    display: none;
}

以及从用户卡中隐藏：

/* Hide the social media platforms from the lower part of their user card */
.public-user-field__you-tube, .public-user-field__vimeo, .public-user-field__instagram, .public-user-field__x-\\(twitter\\), .public-user-field__facebook, .public-user-field__tik-tok {
    display: none;
}

但这些在移动端（个人资料和卡片上）仍然可见

有人能看出我哪里做错了什么吗？

[Arkshine]

我可以看到您的修改，但由于目标不够具体，它已被核心 CSS 覆盖。
您可以在使用浏览器检查元素时看到它，例如：

您需要向您的规则添加 !important 或更具体，例如：

.user-profile-location {
    display: none !important;
}

.user-main .about .details .user-profile-location {
    display: none;
}

通常建议首先正确指定规则，以避免定位意外的元素。

[Richie (Richie Rich)]

@Arkshine

.user-main .about .details .user-profile-location

有意思，谢谢 @Arkshine

我很想精确地定位到具体的元素，而不是宽泛地选择或使用 !important 覆盖。

你是如何从右侧的样式面板中得到这些特定的元素名称的：

.user-main .about .details .user-profile-location {

还是说我需要向上滚动并手动记录父元素？

为什么我不需要添加 .primary .primary-textual

[Arkshine]

@Richie

您是如何推导出这些特定元素名称的：

只是复制并粘贴了核心部分的内容：

即使您应用相同的规则，TC CSS 也会在核心之后应用，所以这可行。

更多关于 CSS 特异性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity。

@Richie

或者是我需要向上滚动更多并手动记下父元素？

您不一定需要包含每个父元素，只需包含主要部分，以缩小目标范围，使其足够具体。

[Richie (Richie Rich)]

@Arkshine

不一定需要包含每个父级

我认为正是这一点让我感到困惑。

它现在在桌面和移动设备上都能完美运行，并且是专门定位的，而不是宽泛的或使用 !important。

再次感谢您的帮助和见解

[Richie (Richie Rich)]

为了完整起见，以防将来对其他人有帮助。

我曾尝试使用此 CSS 来隐藏一些自定义用户字段：

/* 从其公共个人资料页面的下部隐藏社交媒体平台 */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

需要将其更改为以下内容才能在桌面和移动设备上运行：

/* 从其个人资料页面的下部隐藏社交媒体平台 */
.user-main .about .details .public-user-fields .you-tube, .user-main .about .details .public-user-fields .vimeo, .user-main .about .details .public-user-fields .instagram, .user-main .about .details .public-user-fields .x-\(twitter\), .user-main .about .details .public-user-fields .facebook, .user-main .about .details .public-user-fields .tik-tok {
    display: none;
}