Как дифференцировать общий класс css с использованием другого класса css

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

Вы можете обратиться к вложенным классам. В текущем 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 находится где-то под v-caption-top_header в DOM, а второй один указывает, что это прямой ребенок, то есть сразу под ним в DOM. Второй вариант, вероятно, предпочтительнее, за исключением того, что он не работает в IE6, поэтому, если вам нужно поддерживать IE6, используйте первый)

Другие параметры, которые у вас есть, потребуют изменения кода HTML.

Вы могли бы дать Create User Wizard элемент определенный идентификатор и использовать его вместо класса:

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

#wizard_element { ..... } 

или использовать несколько классов:

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

.wizard_element { ..... } 

В этом случае, выбор между ID или класса будет зависеть от того, будет ли вы немного стилизовать этот элемент, будет уникальным - если он специфичен для этого элемента, тогда используйте идентификатор; если вы хотите использовать его в другом месте, используйте класс.

Если вы еще есть проблемы, вы можете попробовать использовать несколько хитрых решений:

CSS поддерживает селекторы атрибутов, которые позволяют выбирать элементы на основе определенных атрибутов HTML. Это может быть очень полезно, но я не думаю, что это поможет вам здесь (так как в любом случае у вас не так много атрибутов, кроме стилей и классов). Также это не работает в IE6.

Другим вариантом могут быть псевдоселекторы, такие как :first-child или :nth-child(). Используя их, вы можете, например, указать, что первый соответствующий элемент получает один стиль, а другие - что-то еще. Они могут быть полезны для вас, в сочетании с другими методами, описанными выше. Однако у вас будут проблемы с ними со всеми текущими версиями IE, поэтому, вероятно, не рекомендуется.

Там очень хороший обзор доступных CSS селекторов, а также, какие браузеры поддерживают их в quirksmode.org: http://www.quirksmode.org/css/contents.html

Answer 2

Как DIV вы хотите стилизации ребенка v-caption v-caption-top_header но v-caption v-caption-top_header не является родителем другого DIV вы не хотите трогать, это должно работать:

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

Конечно подход лучше просто добавить id="someuniqueid" в DIV вы хотели бы стиль, а затем добавить

#someuniqueid { /* style goes here */ } 

Answer 3

дать ему идентификатор, в отличие от КЛАССА

Answer 4

Является ли класс v-caption-top_header родителя div уникальным? Если да, вы можете использовать селектор потомков:

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

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