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.

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