Alt öğelere CSS Stili uygulama

232

Stilleri yalnızca belirli bir sınıfla DIV içindeki tabloya uygulamak istiyorum:

Not: Alt öğeler için bir css seçici kullanmayı tercih ederim.

# 1 neden çalışıyor ve # 2 çalışmıyor?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

Neyi yanlış yapıyorum?

css css-selectors

— roman m
kaynak

IE6 ve altı için>, + ve [] seçicilerinin kullanılamadığını unutmayın.

— Erick

309

Bu kod " div.test th, td, caption {padding:40px 100px 40px 50px;}" , tüm öğelere ve tüm öğelere ek olarak, sınıfı thbulunan bir divöğenin içerdiği tüm öğelere kural uygulartest td caption öğelere .

Bu aynı değildir "Tüm td, thve captionelemanları bir tarafından bulunan divbir sınıf ile eleman test". Bunun için seçicilerinizi değiştirmeniz gerekir:

' >' bazı eski tarayıcılar tarafından tam olarak desteklenmiyor (sana bakıyorum, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— Ken Browning
kaynak

div.test'i 3 kez yazmanın bir yolu var mı?

— roman m

2

@rm Hayır. Kuralların iç içe yerleştirilmesi ya da 'ile' tür gruplaması yoktur

— sblundy

2

@romanm 'div.test' yazmanın 3 kat fazla yolu var! css dosyaları yazmak için sass veya daha az çerçeve kullanarak içine bakmak! :)

— gillyb

@romanm - tekrarımı önlemek için tüm çocukları hedeflemek için * kullanarak veya tüm doğrudan çocuklar için .class> * kullanarak cevabımı görün. Zor değil.

— Richard Edwards

IE'de desteklenmemesi ile ilgili ipucu çok yardımcı oldu, iOS'ta DTCoreText için bazı CSS çalışmaları yapmaya çalışıyordum ama işe yaramadı, ayrıştırıcıları IE'den daha kötü.

— Sirenler

123

.test * {padding: 40px 100px 40px 50px;}

— Richard Edwards
kaynak

11

* Burada .test *, her alt öğe için en spesifik kural olacağından, daha özel bir kuralla geçersiz kılamayacağınız anlamına gelir . Başka bir deyişle, içine koyduğunuz her şeyin .test *daha spesifik bir css kuralı tarafından geçersiz kılınamayacağını unutmayın, çünkü test *en spesifik kural budur.

— vadasambar

81

> selektör direkt çocukları değil, yalnızca soyundan eşleşir.

İstediğiniz

div.test th, td, caption {}

veya daha olası

div.test th, div.test td, div.test caption {}

Düzenle:

İlki diyor

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

İkinci ise

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

Orijinalinizde div.test > thdiyor ki any <th> which is a **direct** child of <div class="test">, bu eşleşecek <div class="test"><th>this</th></div>ancak eşleşmeyecek<div class="test"><table><th>this</th></table></div>

— Greg
kaynak

fwiw, çünkü bu seçicideki td ve altyazı "aptal" - div.test'e bakmaksızın herhangi bir th / altyazıyla eşleşecekler. Bu tür kör hedefleme nadiren CSS'de en genel stiller dışında herhangi bir şey için istediğiniz şeydir.

— annakata

@annakata: bu css çerçevesinin bir parçası, yerel olarak uygulamaya çalışıyorum

— roman m

10

Tüm alt öğelere stil eklemek istiyorsanız ve html etiketi için herhangi bir belirtim yoksa kullanın.

Üst etiket div.parent

div.parent gibi içindeki alt etiketi <a>, <input>,<label> vb

kod: div.parent * {color: #045123!important;}

Ayrıca önemli kaldırabilirsiniz, gerekli değildir

— user1369111
kaynak

7

İşte son zamanlarda yazdığım bazı kod. Sınıf / kimlik isimlerini sahte sınıflarla birleştirmenin temel bir açıklaması olduğunu düşünüyorum.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

Snippet'i genişlet

— işaret
kaynak

CSS, gibi tek satırlı yorumlara izin vermez //. Bkz. Stackoverflow.com/questions/4656546/…

— Volker E.

4

div.test td, div.test caption, div.test th

benim için çalışıyor.

Alt seçici> IE6'da çalışmaz.

— Traingamer
kaynak

2

Bunu bildiğim kadarıyla:

div[class=yourclass] table {  your style here; }

veya sizin durumunuzda bile:

div.yourclass table { your style here; }

(ancak bu öğeler yourclassolmayabilir div) için çalışır, sadece içindeki tabloları etkiler yourclass. Ken'in dediği gibi,> her yerde desteklenmez (ve div[class=yourclass]sınıflar için nokta gösterimini kullanın).

— tunnuz
kaynak

0

Bu kod, SCSS sözdizimini kullanarak hile yapabilir

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
kaynak