CSS классы и подклассы - PullRequest
Новая
       25

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

89 голосов
/ 18 февраля 2009

Возможно ли, кроме того, что я делаю, потому что это, похоже, не работает, сделать это? Я хочу иметь подклассы, которые находятся в классе, чтобы использовать CSS специально для этого класса. 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>

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

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

Ответы [ 11 ]

167 голосов
/ 18 февраля 2009

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

.area2 .item
{
    ...
}
68 голосов
/ 18 февраля 2009

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

.area1.item
{
    color:red;
}

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

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

Например: 

<div class="area1 item">

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

26 голосов
/ 18 февраля 2009

Похоже, что ваша проблема заключается в отсутствии пробела между вашими двумя классами в CSS: 

.area1.item
{
    color:red;
}

Должно быть 

.area1 .item
{
    color:red;
}
14 голосов
/ 18 февраля 2009

Вы хотите, чтобы были выбраны только дети? 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;
}
10 голосов
/ 18 февраля 2009

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

.area1 .item
{
    color:red;
}

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

8 голосов
/ 18 февраля 2009

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

.area1 .item
{
    ...
}

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

5 голосов
/ 12 июня 2012

Исходя из ответа kR105 выше:

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

Здесь была проблема: у меня было два блока (div), каждый с одинаковым радиусом границы (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}

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

3 голосов
/ 18 февраля 2009

Это основа 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 { ... }

То есть это повлияет на ВСЕ элементы .larger.

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

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

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

.area2.area2Larger { ... }

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

1 голос
/ 12 июня 2012

kR105 писал (а):

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

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

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

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

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

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

1 голос
/ 18 февраля 2010

Класс, который вы применяете к 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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...