Question

所以我一直在为jQuery的selectMenu UI插件编辑CSS。

我有一个包含所有CSS的单独文件。我想总是将它包含在每个页面请求中，但它只适用于我的选择菜单，而不是我的其他jquery UI元素。

我如何做到这一点？

我在容器上放了一个名为“myClass”的类，用于链接和包含UL的包装器跨度。这是一个例子。

  .ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default {
    border: 1px solid #DDDDDD;
    color: #a8a8a8;
    font-weight: bold;
}

我应该向此类添加什么，以便它只适用于“myClass”div下面的元素？

Answer 1

您可以通过按存在顺序列出层次结构或使用箭头进行直接继承来指定层次结构。 e.g。

.myClass .foo {
}

<div class="foo">          <!-- WILL NOT apply to this "foo" -->
  <div class="myClass">
    <div class="foo">      <!-- WILL apply to this class, it's beneath .myClass -->

说它只适用于类“foo”的元素，它们位于类“myClass”的元素下面。

.myClass > .foo {
}

<div class="myClass">
  <div class="foo">      <!-- WILL apply to this class, it's DIRECTLY beneath .myClass -->
  <div class="bar">
    <div class="foo">      <!-- WILL NOT apply to this class (not directly beneath .myClass) -->

（注意>）意味着它只适用于被归类为“myClass”的元素下面的“Foo”元素。

如需进一步阅读，请参阅w3 spec. on CSS selectors

Answer 2

将它们链接起来：

.myclass .ui-state-default,
  .myclass .ui-widget-content .ui-state-default,
  .myclass .ui-widget-header .ui-state-default {
     border: 1px solid #DDDDDD;
     color: #a8a8a8;
     font-weight: bold;
}

如果你想通过div的id链接它们：

#myDiv .ui-state-default,
  #myDiv .ui-widget-content .ui-state-default,
  #myDiv .ui-widget-header .ui-state-default {
     border: 1px solid #DDDDDD;
     color: #a8a8a8;
     font-weight: bold;
}

Answer 3

.myClass .ui-state-default, .myClass .ui-widget-content,
.myClass .ui-state-default, .myClass .ui-widget-header,
.myClass .ui-state-default {
    border: 1px solid #DDDDDD;
    color: #a8a8a8;
    font-weight: bold;
}

Answer 4

您可以使用以下CSS选择器来选择myClass类下的元素...

.myClass .childClassName { }

我有点不清楚你究竟在问什么，但希望这会有所帮助。

使CSS特定于一个Div

4 个答案: