Question

<div style="position: absolute; left: 0px; top: 5px;" class="v-caption v-caption-top_header">
  <div class="v-captiontext">Create User Wizard</div><div style="clear: both; width: 0px; height: 0px; overflow: hidden;">
  </div>
</div>
<div style="top: 70px; left: 10px;" class="v-absolutelayout-wrapper">
  <div style="height: 5px; width: 1257px;" class="v-label v-label-intro_key intro_key">
  </div>
</div>
<div style="position: absolute; left: 10px; top: 55px;" class="v-caption v-caption-intro_key">
  <div class="v-captiontext">User Details.
</div>

我必须将一些样式应用于Create User Wizard文本。但我不能直接引用v-captiontext css类becoz同样的css类也被其他文本使用，例如User Details文本。如何仅将更改应用于Create User Wizard文字。

Answer 1

由于您要为v-caption v-caption-top_header但v-caption v-caption-top_header的孩子设置样式的div不是您不想触摸的其他div的父级，因此这应该有效：

.v-caption.v-caption-top_header .v-captiontext {
 /* whatever style you want */
}

当然，更好的方法是将id="someuniqueid"添加到您要设置样式的div中，然后添加

#someuniqueid { /* style goes here */ }

Answer 2

您可以参考嵌套类。在您当前的HTML中，您可以在其中引用v-caption-top_header v-captiontext，如下所示：

.v-caption-top_header .v-captiontext {
  ...some styles here...
}

或

.v-caption-top_header>.v-captiontext {
  ...some styles here...
}

（其中第一个指定v-captiontext位于DOM中v-caption-top_header下方的某个位置，而第二个指定它是直接子节点;即位于DOM中的正下方。可能更好，除了它在IE6中不起作用，所以如果你需要支持IE6然后使用第一个）

您拥有的其他选项将要求您更改HTML代码。

您可以为Create User Wizard元素指定一个特定ID，并使用该ID而不是类：

<div class='v-captiontext' id='wizard_element'>....</div>

#wizard_element { ..... }

或使用多个类：

<div class='v-captiontext wizard_element'>....</div>

.wizard_element { ..... }

在这种情况下，ID或类之间的选择取决于你对这个元素的样式是否具有独特性 - 如果它特定于该元素则使用ID;如果你想在别处使用它，那就使用一个类。

如果您仍有问题，可以尝试使用一些棘手的解决方案：

CSS支持属性选择器，允许您根据特定的HTML属性选择元素。这可能非常有用，但我不认为它会对你有所帮助（因为除了样式和类之外你没有太多的属性）。此外，这在IE6中也不起作用。

另一个选项可能是伪选择器，例如:first-child或:nth-child()。例如，使用这些可以指定第一个匹配元素获得一种样式而其他元素获得其他样式。与上述其他技术相结合，这些实际上可能对您有用。但是，对于所有当前版本的IE，你会遇到这些问题，所以可能不推荐。

可以很好地概述可用的CSS选择器，以及Quirksmode.org上支持它们的浏览器：http://www.quirksmode.org/css/contents.html

Answer 3

给它一个ID而不是CLASS

Answer 4

父v-caption-top_header的班级div是唯一的吗？如果是，您可以使用后代选择器：

.v-caption-top_header .v-captiontext {
   ...
}

http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

如何使用其他css类来区分常见的css类

4 个答案: