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

Вопрос:

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

CSS

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

HTML

Итак, я могу просто использовать class= “item” для элементов под родительским классом css “area1”, “area2”. Я знаю, что могу использовать элемент class= “area1 item”, чтобы заставить это работать, но я не понимаю, почему он должен быть таким подробным. Не следует ли подкласс css посмотреть, какой родительский класс он находится, чтобы определить его?

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

Лучший ответ:

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

.area2 .item { … } Ответ №1

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

.area1.item { color:red; }

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

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

Например:

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

Ответ №2

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

.area1.item { color:red; }

Должно быть

.area1 .item { color:red; } Ответ №3

Вы хотите принудительно выбрать только детей? 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; } Ответ №4

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

.area1 .item { color:red; }

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

Ответ №5

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

.area1 .item { … }

Здесь очень хорошая справка для селекторов CSS.

Ответ №6

После ответа от kR105 ответьте выше:

Моя проблема была похожа на проблему с OP (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}

Надеюсь, что кто-то найдет это полезным.

Ответ №7

Это основа 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 IGNORES первый селектор в правиле многоклассов, поэтому IE6 фактически применяет правило .area1.larger как

/*.area1*/.larger { … }

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

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

Тогда решение должно использовать префикс класса CSS, чтобы избежать столкновения с универсальными именами классов:

.area1 { … } .area1.area1Larger { … } .area2.area2Larger { … }

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

Ответ №8

вы также можете иметь два класса внутри такого элемента

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

.item1 { background-color:black; } .item2 { background-color:green; } .item3 { background-color:orange; } Ответ №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> Ответ №10

kR105 писал (а):

вы также можете иметь два класса внутри такого элемента

<div class = «item1 item2 item3»></div

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

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

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

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