Klasy i podklasy CSS

Question 1

Czy jest możliwe, poza tym, co robię, ponieważ to nie działa, aby to zrobić? Chcę mieć podklasy, które są w klasie, aby używać CSS specjalnie dla tej 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>

Więc mogę po prostu użyć class = "item" dla elementów pod nadrzędną klasą css "area1", "area2". Wiem, że mogę użyć class = "area1 item", aby to zadziałało, ale nie rozumiem, dlaczego musi być tak rozwlekły. Czy podklasa css nie powinna sprawdzić, w jakiej klasie nadrzędnej się znajduje, aby ją zdefiniować?

Uwaga: działa to w IE (używam teraz 7), ale w FF nie, więc zakładam, że nie jest to standardowy sposób robienia czegoś w CSS.

Question 2

Wystarczy dodać spację:

.area2 .item
{
    ...
}

Question 3

Do Twojej wiadomości, kiedy zdefiniujesz regułę, tak jak powyżej, z dwoma selektorami połączonymi razem:

.area1.item
{
    color:red;
}

To znaczy:

Zastosuj ten styl do dowolnego elementu, który ma zarówno klasę „area1”, jak i „item”.

Jak na przykład:

<div class="area1 item">

Niestety nie działa w IE6, ale to właśnie oznacza.

Question 4

Wydaje się, że Twoim problemem jest brakująca przestrzeń między dwiema klasami w CSS:

.area1.item
{
    color:red;
}

Powinien być

.area1 .item
{
    color:red;
}

Question 5

chcesz wymusić wybieranie tylko dzieci? 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

Wystarczy wstawić spację między .area1 i .item, np .:

.area1 .item
{
    color:red;
}

ten styl ma zastosowanie do elementów z elementem klasy wewnątrz elementu o klasie area1.

Question 7

Po prostu umieść spację między zajęciami

.area1 .item
{
    ...
}

Oto bardzo dobre odniesienie do selektorów CSS .

Question 8

W związku z powyższą odpowiedzią kR105:

Mój problem był podobny do tego z OP (Original Poster), występował tylko poza tabelą, więc podklasy nie były wywoływane z zakresu klasy nadrzędnej (tabeli), ale poza nią, więc musiałem DODAĆ selektory , jak wspomniano kR105.

Oto problem: miałem dwa pola (elementy div), każde z tym samym promieniem obramowania (HTML5), dopełnieniem i marginesem, ale musiałem nadać im różne kolory. Zamiast powtarzać te 3 parametry dla każdej klasy koloru, chciałem, aby „nadklasa” zawierała obramowanie-promień / dopełnienie / margines, a następnie tylko poszczególne „podklasy”, aby wyrazić ich różnice (podwójne cudzysłowy wokół każdej z nich, ponieważ tak naprawdę nie są to podklasy - zobacz mój późniejszy post). Oto jak to wyszło:

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}

Mam nadzieję, że ktoś uzna to za pomocne.

Question 9

To jest kręgosłup CSS, „kaskada” w kaskadowych arkuszach stylów.

Jeśli napiszesz swoje reguły CSS w jednej linii, łatwiej będzie zobaczyć strukturę:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

Używanie wielu klas jest również dobrym pośrednim / zaawansowanym wykorzystaniem CSS, niestety istnieje dobrze znany błąd IE6, który ogranicza to użycie podczas pisania kodu między przeglądarkami:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 IGNORUJE pierwszy selektor w regule wielu klas, więc IE6 faktycznie stosuje regułę .area1.larger jako

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

Oznacza to, że wpłynie to na WSZYSTKIE większe elementy.

Jest to bardzo paskudny i niefortunny błąd (jeden z wielu) w IE6, który zmusza cię do prawie nigdy nie używania tej funkcji CSS, jeśli chcesz mieć jeden czysty plik CSS dla różnych przeglądarek.

Rozwiązaniem jest więc użycie prefiksów nazw klas CSS, aby uniknąć kolizji z ogólnymi nazwami klas:

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

.area2.area2Larger { ... }

Równie dobrze możesz użyć tylko jednej klasy, ale w ten sposób możesz zachować CSS zgodnie z zamierzoną logiką, wiedząc, że .area1Larger wpływa tylko na .area1 itd.

Question 10

Klasa zastosowana do elementu div może służyć jako punkt odniesienia na przykład do elementów stylu z tym elementem 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 */

Aby być super semantycznym, należy przenieść klasę na stół.

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

Question 11

możesz również mieć dwie klasy w takim elemencie

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

każda pozycja w klasie jest własną klasą

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Question 12

kR105 napisał:

możesz również mieć dwie klasy w takim elemencie

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

Nie widzę wartości tego, ponieważ zgodnie z zasadą stylów kaskadowych pierwszeństwo ma ten ostatni. Na przykład, jeśli we wcześniejszym przykładzie zmieniłem kod HTML do czytania

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

obramowanie i tekst pola byłyby niebieskie, ponieważ styl .box2 przypisuje te wartości.

Również we wcześniejszym poście powinienem był podkreślić, że dodanie selektorów tak jak zrobiłem to nie to samo, co utworzenie podklasy w klasie (pierwsze rozwiązanie w tym wątku), choć efekt jest podobny.