Класи CSS та підкласи

102

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

css

— Райан Абботт
джерело

183

Просто потрібно додати пробіл:

.area2 .item
{
    ...
}

— Чад Береза
джерело

Я насправді сам не використовую підкласи ...... чи може хтось дати мені причину, де це було б необхідно?

— patricksweeney

2

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

— Метт Хоуелл

74

FYI, коли ви визначаєте правило, як ви робили вище, з двома селекторами, зв'язаними разом:

.area1.item
{
    color:red;
}

Це означає:

Застосуйте цей стиль до будь-якого елемента, який має і клас "area1", і "item".

Як от:

<div class="area1 item">

На жаль, це не працює в IE6, але це означає.

— Метт Хоуелл
джерело

1

Це було насправді те, що я шукав, дякую за пояснення!

— F-3000

Я знаю, що це давнє, але ви маєте на увазі "область1" чи "предмет" замість "область1" та "предмет"? Це робить суттєву різницю.

— Mgamerz

велике спасибі за це, я ламав голову, щоб зрозуміти це.

— користувач3547774

26

Здається, у вашій проблемі відсутній пробіл між вашими двома класами в CSS:

.area1.item
{
    color:red;
}

Має бути

.area1 .item
{
    color:red;
}

— Папуги
джерело

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;
}

— MrChrister
джерело

1

Не те, про що я думав, але це гарна інформація, якщо я хочу лише прямих дітей. Дякую!

— Райан Абботт

Не знав про це. Дякую за це, MrChrister

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

10

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

.area1 .item
{
    color:red;
}

цей стиль застосовується до елементів з елементом класу всередині елемента з класом area1.

— M4N
джерело

8

Просто поставте пробіл між своїми заняттями

.area1 .item
{
    ...
}

Ось дуже хороша довідка для CSS Selectors .

— mbillard
джерело

6

Випливає з відповіді kR105 вище:

Моя проблема була схожа на проблему з ОП (оригінальний плакат), виникала лише поза таблицею, тому підкласи викликалися не в межах батьківського класу (таблиці), а поза нею, тому мені довелося додати селекторів , як згадувалося kR105.

Тут виникла проблема: у мене було два поля (діви), кожне з однаковим радіусом облямівки (HTML5), підкладкою та полем, але потрібно було зробити їх різними кольорами. Замість того, щоб повторювати ці 3 параметри для кожного кольорового класу, я хотів, щоб "суперклас" містив межі радіус / 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}

Сподіваюся, хтось вважає це корисним.

— maximus
джерело

3

Тобто є основою 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 тощо.

1

Клас, який ви застосовуєте у діві, може використовуватися, наприклад, як орієнтир для елементів стилю з цим ділом, наприклад.

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

— Джордж Віскомб
джерело

1

Ви також можете мати два класи в рамках такого елемента

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

кожен предмет у класі - свій клас

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
джерело

1

kR105 написав:

Ви також можете мати два класи в рамках такого елемента

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

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

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

Межі поля та текст будуть синіми, оскільки стиль .box2 призначає ці значення.

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

— maximus
джерело