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

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

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>

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

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

Ответы

Ответ 1

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

.area2 .item
{
    ...
}

Ответ 2

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

.area1.item
{
    color:red;
}

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

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

Например:

<div class="area1 item">

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

Ответ 3

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

.area1.item
{
    color:red;
}

Должно быть

.area1 .item
{
    color:red;
}

Ответ 5

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

.area1 .item
{
    color:red;
}

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

Ответ 6

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

.area1 .item
{
    ...
}

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

Ответ 7

После ответа от 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}

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

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

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

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

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

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

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

.area2.area2Larger { ... }

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

Ответ 9

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

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

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

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Ответ 10

Класс, который вы применяете в 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>

Ответ 11

kR105 писал (а):

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

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

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

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

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

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