移动设备上未应用CSS修改

我很想知道是否有人能帮我处理一些 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 上测试,两者仍然非常明显 :thinking:

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

同样,我也使用此 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;
}

但这些在移动端(个人资料和卡片上)仍然可见 :thinking:

有人能看出我哪里做错了什么吗? :person_shrugging:

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

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

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

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

5 个赞

有意思,谢谢 @Arkshine :smiley:

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

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

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

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

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

1 个赞

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

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

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

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

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

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

再次感谢您的帮助和见解 :bowing_man:

1 个赞

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

我曾尝试使用此 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;
}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.