CSS-классы и подклассы

Question

Возможно ли, кроме того, что я делаю, потому что это не работает, чтобы сделать это? Я хочу иметь подклассы, которые находятся под классом, чтобы использовать CSS специально для класса class.subclass.

CSS

.area1 
{ 
    border:1px solid black; 
} 
.area1.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2.item 
{ 
    color:blue; 
} 

HTML

<div class="area1"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 
<div class="area2"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 

Так что я могу просто использовать класс = "элемент" для элементов под родительским CSS класс "МАСКА1", "AREA2". Я знаю, что могу использовать class = "area1 item", чтобы заставить это работать, но я не понимаю, почему он должен быть таким подробным. Не следует ли подкласс css посмотреть, какой родительский класс он находится, чтобы определить его?

Примечание: это работает в IE (с использованием 7 прямо сейчас), но в FF это не так, поэтому я предполагаю, что это не стандартный способ CSS что-то делать.

Answer 1

Просто нужно добавить пробел:

.area2 .item 
{ 
    ... 
} 

Answer 2

Ваша проблема, кажется, недостающее пространство между вашими двумя классами в CSS:

.area1.item 
{ 
    color:red; 
} 

Должно быть

.area1 .item 
{ 
    color:red; 
} 

Answer 3

Просто поместите пробел между .area1 и .item, например:

.area1 .item 
{ 
    color:red; 
} 

Этот стиль применяется к элементам с элементом класса внутри элемента с областью класса1.

Answer 4

Вы хотите заставить выбрать только детей? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1 
{ 
     border:1px solid black; 
} 
.area1>.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2>.item 
{ 
    color:blue; 
} 

Answer 5

Просто поставить пробел между ваши классы

.area1 .item 
{ 
    ... 
} 

Вот очень хорошая ссылка для CSS Selectors.

Answer 6

FYI, когда вы определяете правила, как вы делали выше, с двумя селекторами соединены друг с другом:

.area1.item 
{ 
    color:red; 
} 

Это означает:

Примените этот стиль к любому элементу, который имеет как класс " area1 "и" item ".

Такие, как:

<div class="area1 item"> 

К сожалению, он не работает в IE6, но вот что это значит.

Answer 7

вы также можете иметь два класса в пределах элемента, как этот

<div class = "item1 item2 item3"></div>

каждого элемента в классе является его собственный класс

.item1 { 
    background-color:black; 
} 

.item2 { 
    background-color:green; 
} 

.item3 { 
    background-color:orange; 
} 

Answer 8

Это является основой CSS, то «каскад "в Каскадные Таблицы стилей.

Если вы пишете ваши правила CSS в одной линии, что делает его легче увидеть структуру:

.area1 .item { color:red; } 
.area2 .item { color:blue; } 
.area2 .item span { font-weight:bold; } 

Использование нескольких классов также хороший средний/продвинутый использование CSS, к сожалению, хорошо известно IE6 ошибка, которая ограничивает это использование при написании кросс код браузера:

<div class="area1 larger"> .... </div> 

.area1 { width:200px; } 
.area1.larger { width:300px; } 

IE6 ИГНОРИРУЕТ первый селектор в правиле мульти-класса, так IE6 фактически применяет правила .area1.larger как

/*.area1*/.larger { ... } 

Значение будет влиять на ВСЕ. Более крупные элементы.

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

Раствор затем должен использовать CSS Classname префиксы, чтобы избежать столкновений Wiht родовых имен классов:

.area1 { ... } 
.area1.area1Larger { ... } 

.area2.area2Larger { ... } 

Может также использовать только один класс, но таким образом вы можете сохранить CSS в логике вы, предназначенной, в то время как зная, что .area1Larger влияет только на .area1 и т. д.

Answer 9

Класс, который вы применяете к div, может использоваться, например, как опорная точка для элементов стиля с этим div.

<div class="area1"> 
    <table> 
     <tr> 
       <td class="item">Text Text Text</td> 
       <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 


.area1 { border:1px solid black; } 

.area1 td { color:red; } /* This will effect any TD within .area1 */ 

Чтобы быть супер-семантичным, вы должны переместить класс на стол.

<table class="area1"> 
     <tr> 
       <td>Text Text Text</td> 
       <td>Text Text Text</td> 
     </tr> 
    </table> 

Answer 10

Вслед за ответ kR105 в выше:

Моей проблемы был аналогичен ОП (Original Poster), встречается только за пределами таблицы, так что подклассы не были вызваны из контекста из родительский класс (таблица), но вне его, поэтому мне пришлось выбирать ADD, как упоминалось в kR105.

В этом была проблема: у меня было две коробки (divs), каждая с одинаковым радиусом границы (HTML5), отступы и разметка, но необходимые для того, чтобы сделать их разными цветами. Вместо того, чтобы повторять эти 3 параметра для каждого класса цветов, я хотел, чтобы «суперкласс» содержал border-radius/padding/margin, а затем отдельные «подклассы», чтобы выразить свои различия (двойные кавычки вокруг каждого, поскольку они не являются действительно подклассами) см. мой более поздний пост).Вот как это сработало:

HTML:

<body> 
    <div class="box box1"> Hello my color is RED </div> 
    <div class="box box2"> Hello my color is BLUE </div> 
</body> 

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px} 
div.box1 {border:3px solid red; color:red} 
div.box2 {border:3px solid blue; color:blue} 

Надежда кто-то считает это полезным.

Answer 11

kR105 писал:

вы также можете иметь два класса в пределах элемента, как это

<div class = "item1 item2 item3"></div 

Я не могу видеть значение этого, так как по принципу каскадные стили, последний имеет приоритет. Например, если в моем предыдущем примере я изменил HTML читать

<div class="box1 box2"> Hello what is my color? </div> 

границы коробки и текст будет синим, так как стиль .box2 присваивает эти значения.

Кроме того, в моем предыдущем посте я должен подчеркнуть, что добавление селекторов, как я сделал это не то же самое, как создание подкласса внутри класса (первое решение в этой теме), хотя эффект аналогичен.