如何为特定页面以不同方式定位 div？

Question

我网站的每个页面上都有 <div class="rightside">。它在每个页面上放置一个联系表单，然后在 850 像素宽的屏幕上（用于响应）它隐藏带有 display: none;

的联系表单

@media only screen and (max-width : 850px) {
.rightside {
    display: none;
} 
}

在“联系我们”页面上，我想让联系表格仅适用于此页面。我怎样才能在联系我们页面上进行更改，以便在联系我们时联系表仍可用于 850 以下的设备，但在其他页面上 display: none;？

更新： 我希望在我的 css 中使用 .rightside 中的属性。我试过：

<div class="rightside" id="contactpage"> in contact page

在 850 的媒体查询中

.rightside #contactpage  {
   float: left;
}

Answer 1

在你的 HTML 上，你可以添加一个额外的 class 到你想要在特定点后消失的所有右侧 div，然后只需使用 CSS select 或仅删除这些 div。更改所有响应式 div 上的 HTML 标记，这样您就有 <div class = "rightside responsive"> 而不是 <div class = "rightside>。这向称为响应的 div 添加了一个额外的 class，从这里您可以 select 具有此 class 的 div 使用 .rightside.responsive 而不是仅 .rightside 在您的媒体查询中。

更新

您最近更新的代码不起作用的原因是您在 #contactpage 和 .rightside 之间有一个 space。通过在两个 select 之间没有 space，您正在 selecting 处于同一级别的元素，并且您的代码应该可以工作。

Answer 2

尝试在现有代码之后添加另一种 css 样式，如下所示：

<div class="rightside contact"></div>


@media only screen and (max-width : 850px) {
    .rightside {
        display: none;
    }
    .rightside.contact {
        display: block;
        float:right;
    } 
}

如何为特定页面以不同方式定位 div？

How to position a div differently for a specific page?

css

responsive-design