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

Question 1

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

Question 2

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

.area2 .item
{
    ...
}

Question 3

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

.area1.item
{
    color:red;
}

Это значит:

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

Такие как:

<div class="area1 item">

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

Question 4

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

.area1.item
{
    color:red;
}

Должно быть

.area1 .item
{
    color:red;
}

Question 5

вы хотите, чтобы отбирались только дети? 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;
}

Question 6

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

.area1 .item
{
    color:red;
}

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

Question 7

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

.area1 .item
{
    ...
}

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

Question 8

Следуя ответу kR105 выше:

Моя проблема была аналогична проблеме OP (Original Poster), возникла только за пределами таблицы, поэтому подклассы вызывались не из области родительского класса (таблицы), а вне ее, поэтому мне пришлось ДОБАВИТЬ селекторы , как упоминалось в кР105.

Проблема заключалась в следующем: у меня было два блока (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}

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

Question 9

Это основа 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, чтобы избежать конфликтов с общими именами классов:

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

.area2.area2Larger { ... }

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

Question 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>

Question 11

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

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

каждый элемент в классе - это отдельный класс

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Question 12

kR105 написал:

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

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

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

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

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

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

Answer 1

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

Answer 2

183

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

.area2 .item
{
    ...
}

Чад Берч
источник

Я сам на самом деле не использую подклассы ... Кто-нибудь может указать мне причину, по которой это может быть необходимо?

patricksweeney

2

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

Мэтт Хауэлл,

Answer 3

Я сам на самом деле не использую подклассы ... Кто-нибудь может указать мне причину, по которой это может быть необходимо?

patricksweeney

Answer 4

2

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

Мэтт Хауэлл,

Answer 5

74

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

.area1.item
{
    color:red;
}

Это значит:

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

Такие как:

<div class="area1 item">

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

Мэтт Хауэлл
источник

1

Это было то, что я искал, спасибо за объяснение!

F-3000

Я знаю, что это древний вариант, но вы имеете в виду «область1» или «предмет» вместо «площадь1» и «предмет»? Это имеет большое значение.

Mgamerz

Большое спасибо за это, я ломал голову, чтобы понять это.

user3547774 08

Answer 6

1

Это было то, что я искал, спасибо за объяснение!

F-3000

Answer 7

Я знаю, что это древний вариант, но вы имеете в виду «область1» или «предмет» вместо «площадь1» и «предмет»? Это имеет большое значение.

Mgamerz

Answer 8

Большое спасибо за это, я ломал голову, чтобы понять это.

user3547774 08

Answer 9

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

.area1.item
{
    color:red;
}

Должно быть

.area1 .item
{
    color:red;
}

Answer 10

14

вы хотите, чтобы отбирались только дети? 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;
}

Мистер Кристер
источник

1

Не то, что я думал, но это хорошая информация, если мне нужны только прямые дети. Спасибо!

Райан Эбботт,

Не знал об этом. Спасибо за это, мистер Кристер

Себастьян Састре

Answer 11

1

Не то, что я думал, но это хорошая информация, если мне нужны только прямые дети. Спасибо!

Райан Эбботт,

Answer 12

Не знал об этом. Спасибо за это, мистер Кристер

Себастьян Састре

Answer 13

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

.area1 .item
{
    color:red;
}

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

Answer 14

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

.area1 .item
{
    ...
}

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

Answer 15

Следуя ответу kR105 выше:

Моя проблема была аналогична проблеме OP (Original Poster), возникла только за пределами таблицы, поэтому подклассы вызывались не из области родительского класса (таблицы), а вне ее, поэтому мне пришлось ДОБАВИТЬ селекторы , как упоминалось в кР105.

Проблема заключалась в следующем: у меня было два блока (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}

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

Answer 16

Это основа 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, чтобы избежать конфликтов с общими именами классов:

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

.area2.area2Larger { ... }

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

Answer 17

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

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

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

каждый элемент в классе - это отдельный класс

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Answer 19

kR105 написал:

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

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

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

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

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

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

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

Ответы: