CSS sınıflarını iç içe yerleştirme

Question

Aşağıdaki gibi bir şey yapabilir miyim?

.class1{some stuff} 

.class2{class1;some more stuff} 

Answer 1

Vanilla CSS ile mümkün değil. gibi bir şey kullanabilirsiniz Ancak:

• Sass
Sass tekrar CSS dalga geçiyor. Sass, CSS3'ün uzantısıdır, iç içe kuralları, değişkenler, miksler, seçici devralma ve daha fazlasını ekler. , komut satırı aracı veya web çerçeve eklentisi kullanılarak iyi biçimlendirilmiş, standart CSS'ye çevrilir.

Ya Less

yerine uzun SEÇİCİNİN isimleri oluşturmak miras belirtmek için

• , Less yapabildiğiniz diğer seçicileri içeride sadece yuva seçiciler. Bu kalıtım net ve stil sayfaları daha kısa yapar.

Örnek:

#header { 
    color: red; 
    a { 
    font-weight: bold; 
    text-decoration: none; 
    } 
} 

Answer 2

değil direkt olarak. Ancak, aynı sonucu elde etmenize yardımcı olması için LESS gibi uzantıları kullanabilirsiniz.

Answer 3

Saf CSS ile değil.

.class1, .class2 { 
    some stuff 
} 

.class2 { 
    some more stuff 
} 

Answer 4

sayılı

Tek bir elemana grouping selectors ve/veya birden sınıfları kullanabilir, ya da CSS yazmak için yazılım ile bir şablon dili ve süreci kullanabilirsiniz: yakın eşdeğer budur.

Ayrıca bkz. CSS inheritance.

Answer 5

Bunun mümkün olduğuna inanmıyorum. Ayrıca class2 olan tüm öğelere class1 ekleyebilirsiniz. Bu elle yapılması pratik değilse, JavaScript ile otomatik olarak yapabilirsiniz (jQuery ile oldukça kolaydır).

Answer 6

Güncelleme: CSS seviye 3 yuvalama için bir CSS3 belirtimi var. Şu anda bir taslak. Onaylanırsa https://tabatkins.github.io/specs/css-nesting/

, sözdizimi şu şekilde görünecektir:

table.colortable { 
    & td { 
    text-align:center; 
    &.c { text-transform:uppercase } 
    &:first-child, &:first-child + td { border:1px solid black } 
    } 
    & th { 
    text-align:center; 
    background:black; 
    color:white; 
    } 
} 

Answer 7

bu deneyin ...

elemanını bir kimlik verin ve aynı zamanda bir sınıf adı. Sonra #IDName yuvalayabilirsiniz.CSS'nizde className.

İşte https://css-tricks.com/multiple-class-id-selectors/