Question

我想在css中仅隐藏一个特定页面的列，我看到了几个选项，但每个都使用了页面ID。如果两个页面具有相同的ID并且差异仅在类定义中会怎样？我想使用＆＃39; display none＆＃39;仅在/ Page 2 /上标记。这是一个例子：

/ 第1页 /

<body id="body" class="bootstrap-body page-body home_body body-admin-logged" role="document">

/ Page 2 /

<body id="body" class="bootstrap-body page-body list_page_body category_list_body body-pathway-top body-admin-logged" role="document">

/ 专栏 - 第2页 / HTML代码

<aside class="col-md-3 col-sm-12 col-xs-12 column-left">

/ Column-Page2 / css代码

.column-content-left, .column-left {
    float: left;
}

如果我在上面的CSS中使用display none，它将完美运行。问题是它反映在 / Page1 /上。

是否可以在css或javascript中执行此操作，而无需访问html？

Answer 1

你也可以选择身体css：

<?xml version="1.0" encoding="utf-8" ?>
<unity xmlns="http://schemas.microsoft.com/practices/2010/unity">

  <assembly name="TestUnityGeneric" />
  <namespace name="TestUnityGeneric"/>

  <alias alias="IEventLong" type="TestUnityGeneric.IEvent`1[System.Int64], TestUnityGeneric" />

  <container name="Entity">
    <register type="IEventBus`2[IEventLong,long]" mapTo="TestEventBus`2[IEventLong,long]"></register>

    <register type="ISender" mapTo="TestSender">
      <constructor>
        <param name="eventBus" dependencyType="IEventBus`2[IEventLong, long]" />
      </constructor>
    </register>
  </container>
</unity>

这应该仅针对body.list_page_body .column-content-left, body.list_page_body .column-left { display: none; }类body触发（或者您可以使用特定于该页面的其他类。

Answer 2

使用第二页独有的类，例如list_page_body和css

.list_page_body .column-content-left, .list_page_body .column-left
{
    display:none;
}

Answer 3

可以在javascript中使用。只需使用window.location.href获取页面的网址，然后添加一个类或其他内容，如果它是您想要特殊处理的页面。

Answer 4

区分第2页和第1页的类是：list_page_body category_list_body和body-pathway-top。因此，您可以使用它们中的任何一个来实现第2页的CSS，而不会影响第1页。

示例：

body.category_list_body .column-left{
  display:none;
}

Answer 5

你可以通过瞄准url路径

来实现jQuery

 jQuery(function ($){
        var pathname = window.location.pathname;
        if (pathname == "/page2/"){
           $(".column-class").css("display","none");
          }
    })

Answer 6

如果第2页的正文标记有唯一的类，则可以使用$.fn.valForm = function() { return this.each(function() { if($(this).val().length < $(this).attr("minLength")) { alert("false"); } else { alert("true"); } }); }; CSS选择器。根据您提供的内容：

.parent .child {}

您知道，通过父/子选择器，您可以使用body.list_page_body .column-content-left, body.list_page_body .column-content-left { display: none; }或.parent .child。前者将选择.parent > .child中.parent类在文档中使用的所有实例：

.child

在上面的示例中，<body class="parent"> <div class="child"> <div class="child"> </div> </div> </body>会将规则应用于初始.parent .child {}和嵌套.child。

后者.child仅适用于直系后代。使用上面的相同示例，.parent > .child仅选择初始的.child元素。嵌套的.parent > .child不会受到影响。

css在特定页面上显示none，没有页面ID

6 个答案: