CSS Sınıfları ve Alt Sınıfları

Question 1

İşe yaramadığı için yaptığım şey dışında bunu yapmak mümkün mü? CSS'yi özellikle o class.subclass için kullanmak üzere bir sınıfın altında olan alt sınıflara sahip olmak istiyorum.

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>

Böylece üst css sınıfı "alan1", "alan2" altındaki öğeler için yalnızca class = "item" kullanabilirim. Bunu çalıştırmak için class = "area1 item" kullanabileceğimi biliyorum, ama bunun neden bu kadar ayrıntılı olması gerektiğini anlamıyorum. Css alt sınıfı, onu tanımlamak için hangi üst sınıfın altında olduğuna bakmamalı mı?

Not: Bu, IE'de çalışıyor (şu anda 7 kullanıyor), ancak FF'de çalışmıyor, bu yüzden bunun bir CSS yapmanın standart bir yolu olmadığını varsayıyorum.

Question 2

Sadece bir boşluk eklemeniz gerekiyor:

.area2 .item
{
    ...
}

Question 3

Bilginize, yukarıda yaptığınız gibi, birbirine zincirlenmiş iki seçiciyle bir kural tanımladığınızda:

.area1.item
{
    color:red;
}

Anlamı:

Bu stili hem "alan1" hem de "öğe" sınıfına sahip herhangi bir öğeye uygulayın.

Gibi:

<div class="area1 item">

Ne yazık ki IE6'da çalışmıyor ama anlamı bu.

Question 4

Sorununuz, CSS'deki iki sınıfınız arasında eksik bir boşluk gibi görünüyor:

.area1.item
{
    color:red;
}

Olmalı

.area1 .item
{
    color:red;
}

Question 5

yalnızca çocukları seçilmeye zorlamak mı istiyorsunuz? 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 ve .item arasına bir boşluk koyun, örneğin:

.area1 .item
{
    color:red;
}

bu stil, alan1 sınıfına sahip bir öğe içinde sınıf öğesi bulunan öğeler için geçerlidir.

Question 7

Sadece sınıflarınızın arasına bir boşluk bırakın

.area1 .item
{
    ...
}

İşte CSS Seçiciler için çok iyi bir referans .

Question 8

KR105'in yukarıdaki yanıtından sonra:

Benim sorunum OP (Orijinal Poster) ile benzerdi, yalnızca bir tablonun dışında meydana geldi, bu nedenle alt sınıflar üst sınıfın (tablo) kapsamından değil, onun dışından çağrıldı, bu yüzden seçiciler EKLE , kR105'in belirtildiği gibi.

Sorun şuydu: Her biri aynı kenarlık yarıçapına (HTML5), dolguya ve kenar boşluğuna sahip, ancak bunları farklı renklerde yapmam gereken iki kutum (div) vardı. Her bir renk sınıfı için bu 3 parametreyi tekrarlamak yerine, bir "süper sınıf" ın border-radius / padding / margin içermesini, ardından farklılıklarını ifade etmek için yalnızca ayrı "alt sınıfların" olmasını istedim (gerçekte alt sınıf olmadıklarından her birinin etrafına çift tırnak işareti koyun - sonraki yazıma bakın). İşte nasıl sonuçlandı:

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}

Umarım birisi bunu faydalı bulur.

Question 9

Bu CSS'nin bel kemiğidir, Basamaklı Stil Sayfalarındaki "basamaklı" .

CSS kurallarınızı tek bir satırda yazarsanız, yapıyı görmeyi kolaylaştırır:

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

Birden fazla sınıf kullanmak aynı zamanda iyi bir orta / ileri düzey CSS kullanımıdır, ne yazık ki, tarayıcılar arası kod yazarken bu kullanımı sınırlayan iyi bilinen bir IE6 hatası vardır:

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

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

IE6 , çok sınıflı bir kuraldaki ilk seçiciyi YOK EDER , bu nedenle IE6 aslında .area1.larger kuralını şu şekilde uygular:

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

TÜM .larger öğeleri etkileyeceği anlamına gelir.

Bu, tarayıcılar arası temiz bir CSS dosyası istiyorsanız, sizi CSS'nin bu özelliğini hemen hemen hiç kullanmamaya zorlayan, IE6'daki çok kötü ve talihsiz bir hatadır (birçoğundan biri).

Çözüm, genel sınıf adları ile çakışmayı önlemek için CSS sınıf adı öneklerini kullanmaktır:

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

.area2.area2Larger { ... }

Sadece bir sınıf da kullanabilirsiniz, ancak bu şekilde CSS'yi amaçladığınız mantıkta tutabilirsiniz, ancak .area1Larger'ın yalnızca .area1'i etkilediğini bilirsiniz.

Question 10

Div üzerinde uyguladığınız sınıf, örneğin o div ile stil öğelerine bir referans noktası olarak kullanılabilir.

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

Süper anlamsal olmak için sınıfı masaya taşımalısınız.

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

Question 11

bunun gibi bir öğe içinde iki sınıfa sahip olabilirsiniz

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

sınıftaki her öğe kendi sınıfıdır

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Question 12

kR105 şunu yazdı:

bunun gibi bir öğe içinde iki sınıfa sahip olabilirsiniz

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

Basamaklı stiller ilkesine göre sonuncusu öncelikli olduğu için bunun değerini göremiyorum. Örneğin, önceki örneğimde HTML'yi okumak için değiştirdiysem

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

.box2'nin stili bu değerleri atadığından kutunun kenarlığı ve metni mavi olur.

Ayrıca önceki yazımda , etkisi benzer olsa da, seçiciler eklemenin bir sınıf içinde bir alt sınıf oluşturmakla aynı şey olmadığını vurgulamalıydım (bu konu başlığındaki ilk çözüm).