css - 使 CSS 特定于一个 Div

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

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

.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