2011-01-22 3 views
2

У меня есть простой стиль границы говорит:OO подобное поведение в CSS: наследование возможно?

.border 
{ 
    /*content*/ 
} 

Я хочу несколько других классов, чтобы наследовать этот стиль границы. Можно ли это сделать только в CSS? Или мне нужно указать его в HTML?

Я хочу:

.actionArea : .border 
{ 
    /*content */ 
} 

Или это может быть сделано только в HTML, как:

<div class="actionArea border"/> 

Было бы очень обидно, если последнее возможно только.

Update
Это работает достаточно хорошо, но все еще немного некрасиво:

.actionArea, .otherArea, .anotherArea 
{ 
    /*border specification */  
} 

.actionArea 
{ 
    /*area specification/* 
} 

.otherArea 
{ 
    /*area specification/* 
} 

(..) 

ответ

2

Вам нужно будет использовать структуру CSS, такие как LESS для такой вещи.

1

Вы можете использовать sass. Вероятно, это раскрой функция, которую Вы хотите использовать http://sass-lang.com/#nesting

table.hl { 
    margin: 2em 0; 
    td.ln { 
    text-align: right; 
    } 
} 

li { 
    font: { 
    family: serif; 
    weight: bold; 
    size: 1.2em; 
    } 
} 

Или, как сказал Одед вы можете использовать LESS. МЕНЬШЕ имеет некоторую интересную особенность, одна из которых - mixins. Это не совсем наследство, но это дает вам Has-отношения в CSS

Пример скопированного из МЕНЬШЕ

.bordered { 
    border-top: dotted 1px black; 
    border-bottom: solid 2px black; 
} 

#menu a { 
    color: #111; 
    .bordered; 
} 
.post a { 
    color: red; 
    .bordered; 
} 
Смежные вопросы