CSS stil sayfaları hangi sırayla geçersiz kılınır?

157

Bir HTML başlığında şunu elde ettim:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssbenim sayfaya özgü sayfam. master.csstarayıcı varsayılanlarını geçersiz kılmak için projelerimin her birinde kullandığım bir sayfadır. Bu stil sayfalarından hangisi önceliklidir? Örnek: ilk sayfa belirli

body { margin:10px; }

Ve ilişkili kenarlıklar, ancak ikincisi sıfırlarımı içeriyor

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Temel olarak, CSS'nin basamaklı öğesi, stil sayfası başvuruları açısından tipik CSS işlevlerinde olduğu gibi çalışır mı? Son satır görüntülenen anlamına mı geliyor?

css overriding stylesheet

— ian5v
kaynak

Şimdi bunun Web Yöneticileri için daha uygun olacağını fark ettim. Bunu göndermek için daha iyi bir yer var mı?

— ian5v

10

Tam burada iyi.

— Blender

4

body:not(input="button")bu arada geçerli bir seçici değil. Muhtemelen bölmek istediniz body, input:not([type="button"]).

— BoltClock

İlginç. Daha önce böyle bir sözdizimi gördüğüme inanmıyorum. Hala yeniyim, ama bu çift parantez benim için yabancı.

— ian5v

bu parantezler nitelik seçiciler içindir: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: muhtemelen stil sayfalarının sırasını değiştirmek istiyorsunuz: Genel olarak master.cssönce yüklenmeli, sonra geçersiz kılmak daha kolay ana stilleri styles.css.

— grilly

163

CSS kuralı basamaklı kuralları karmaşıktır - onları kötü bir şekilde açıklama yapmaya çalışmak yerine, sizi sadece spesifikasyona yönlendireceğim:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Kısacası: daha spesifik kurallar daha genel kuralları geçersiz kılar. Özgüllük, kaç ID'nin, sınıfın ve öğe adının dahil edildiğine ve !importantbildirimin kullanılıp kullanılmadığına göre tanımlanır. Aynı "özgüllük seviyesi" nin birden fazla kuralı mevcut olduğunda hangisi en son kazanırsa kazanır.

— duskwuff -inaktif-
kaynak

1

O zaman hangi stil sayfalarının yükleneceğine dair belirli bir kural yoktur? CSS'nin özgüllük açısından nasıl görüntülendiğini anlıyorum, ancak sonra ana sayfamın geçersiz kılınmadıkça yükleneceğini varsayacağım.

— ian5v

11

Aslında, !importantdoğrudan çağlayana katılır ve özgüllükle ilgisi yoktur. Özgüllük seçicilerle ilgilidir, !importantmülkiyet bildirimleriyle birlikte kullanılır. (Yani kuralların karmaşık olduğunu söylemekte haklısın

— !;

2

Öyleyse, stil sayfaları öğelerle aynı şekilde yüklenir mi, aynı spesifikliğe sahiplerse son öncelikli olur mu?

— ian5v

3

@iananananan: Temel olarak, tarayıcı hiçbir zaman CSS'yi ayrı ayrı stil sayfaları olarak görmez. Birden fazla stil sayfası varsa, hepsi dev bir stil sayfasıymış gibi davranılır ve kurallar buna göre değerlendirilir.

— BoltClock

2

@ user34660 BoltClock'un yorumu CSS stilinin bakış açısından. Stil sayfalarının DOM'da ayrı tutulduğu doğrudur, ancak bu ayrım, bu stillerin herhangi bir şeye nasıl uygulanacağını etkilemez.

— duskwuff -inactive-

31

En belirgin stil uygulanır:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Seçicilerin tümü aynı özgüllüğe sahipse, en son decleration kullanılır:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

Sizin durumunuzda, body:not([input="button"])daha spesifik olduğu için stilleri kullanılır.

— karıştırıcı
kaynak

1

Son seçiciyle ilgili soru hakkındaki yorumuma bakın.

— BoltClock

1

Özgünlük kuralı, düzenlenemez stil sayfasını geçersiz kılmamız gerektiğinde işleri zorlaştırıyor!

— Ari

23

Düzen önemlidir. Birden çok oluşumun bildirilen son değeri alınır. Lütfen çalıştığımın aynısını görün: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Sırasını değiştirirseniz, .test{}HTML'nin CSS'de bildirilen sonuncunun değerini aldığını görebilirsiniz.

— Roy MJ
kaynak

3

Bu yüzden son olarak en spesifik CSS'yi eklemelisiniz.

— canlı aşk

17

Son yüklenen CSS, aynı css ayarlarına sahip tüm css'leri geçersiz kılacak MASTER

Misal:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

H1 etiketi için çıktı yazı tipi boyutunda olacaktır: 30 piksel;

— Doodl
kaynak

1

Selam. Benim durumumda ilk tanımlanan .cssson yüklenir. Yüklendikleri sırayla mı yoksa tanımlandıkları sırayla mı uygulanıyorlar?

— Eugen Konkov

Teşekkürler, bu tam olarak aradığım açıklama.

— HunterTheGatherer

7

Bir örnekle basamaklı kuralı basitleştirmeye çalışalım. Kurallar genel olana daha özgüdür.

Kimliğin ilk kuralını uygular (sıradan bağımsız olarak sınıf ve / veya elemanlar üzerinde)
Sınıfları düzene bakılmaksızın elemanlar üzerine uygular
Sınıf veya kimlik yoksa, genel olanları uygular
Aynı grup / düzey için siparişteki son stili (dosya yükleme sırasına göre bildirim sırası) uygular.

İşte css ve html kodu;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

İşte css tarzı

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

İşte sonuç. Stil dosyalarının sırası veya stil bildirimi ne olursa olsun, id="important"sonunda uygulanır (en class="deadline"son bildirilene dikkat edin, ancak herhangi bir etkisi yoktur).

<article>Eleman içeren <aside>ancak son bildirilen tarzı bu durumda, yürürlüğe girecek, eleman article h2 { .. } üçüncü h2 elemanı üzerinde.

İşte IE11'de sonuç: (Resim yayınlamak için yeterli hak yok) DarkBlue: Houston Chronicle News, DarkGreen: Şehrinizdeki Son Gelişmeler, Mor: Houston Yerel Reklam Bölümü, Siyah: Sonraki bölüm

— Kagan Agun
kaynak

6

Hem yükleme sırasına hem de her stile uygulanan gerçek kuralların özgüllüğüne bağlıdır. Sorunuzun bağlamı göz önüne alındığında, önce genel sıfırlama, ardından sayfaya özgü yüklemek istediğiniz. Öyleyse hala amaçlanan etkiyi görmüyorsanız, başkalarının işaret ettiği gibi ilgili seçicilerin özgüllüğüne bakmanız gerekir.

— prodigitalson
kaynak

2

EDIT: Nisan 2020, @ LeeC'nin yorumuna göre, bu artık geçerli değil

Evet, bir sayfadaymış gibi çalışır, ancak:

Yükleme Sırası Önemlidir!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

Yukarıdaki kodda, master.cssdaha sonra yüklenecek bir garanti yoktur styles.css. Bu nedenle, master.csshızlı bir şekilde yüklenir ve styles.cssbiraz zaman alırsa , styles.cssikinci stil sayfası olur ve aynı özgüllükteki kuralların master.cssüzerine yazılır.

Dağıtımdan önce tüm kurallarınızı bir sayfaya koymak (ve küçültmek) en iyisidir.

— Nick
kaynak

Bir sayfanın <head> bölümünden yüklenen, akıllı telefonlara ve tabletlere özgü bir stil sayfası yüklemek için koşullu ortam nitelikleri içeren alternatif neredeyse aynı stil sayfaları için durumu düşünün . Bu durumda, yükleme sırası belirsizse , medyada belirtilen mantık her stil sayfası için kesinlikle dışlanmalıdır.

— Lindsay Haisley

@n_i_c_k Yanıtınız yanlış. Sırası beyanı değil, önemli olan yük düzeni. Bunu indirmeyi durdurarak master.cssve styles.cssyükü tamamen bırakarak Fiddler ile test ettim . Sonra master.cssyüklüyorum. "Çakışan" stil master.csshala uygulandı ve oluşturma işlemi master.cssyüklenip ayrıştırılana kadar engellendi . Not : styles.css` rel=preloadüzerinde denedim master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above .

— LeeC

Teşekkürler @LeeC, yazarken cevabımın doğru olduğunu biliyorum, ama şimdi düzeltildiğini söyleyeceğim ve cevabımı düzenleyeceğim.

— n_i_c_k

1

En iyi yol, sınıfları mümkün olduğunca kullanmaktır. Yine de kimlik seçicilerinden (#) kaçının. Sadece tek sınıflı seçiciler yazdığınızda, CSS mirasını takip etmek çok daha kolaydır.

Güncelleme: Bu makalede CSS özgüllüğü hakkında daha fazla bilgi edinin: https://css-tricks.com/specifics-on-css-specificity/

— Jeroen Ooms
kaynak

1

Bu CSS özgüllüğü hakkında harika bir makale: css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

Sorunuzdan, yinelenen seçimler, tüm sayfalar için geçerli olan bir kalıp kümesi ve her bir sayfa için kalıp değerlerini geçersiz kılmak istediğiniz daha belirgin bir kümeniz olduğundan şüpheleniyorum. Bu durumda, siparişiniz doğrudur. Master önce yüklenir ve sonraki dosyadaki kurallar öncelik taşır (özdeş veya aynı ağırlığa sahiplerse). Bu web sitesinde tüm kuralların şiddetle tavsiye edilen bir açıklaması vardır http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Ön uç geliştirmeye başladığımda, bu sayfa birçok soruyu sildi.

— user3094826
kaynak

0

Bu bir kaskad beyanlarının öncelik tanımlar. Resmi şartnameyi tavsiye edebilirim; bu kısmı iyi okunabilir.

https://www.w3.org/TR/css-cascade-3/#cascading

Aşağıdakilerin sıralama üzerinde, azalan öncelik sırasına göre bir etkisi vardır.

Kökeni ve önemi bir arada :
1. Transition bildirimleri
2. Kullanıcı aracısının bildirimleri ile işaretli !important
3. Kullanıcının bildirimleri ile işaretli !important
4. Sayfa yazarının bildirimleri ile işaretli !important
  1. İle elemana Tanımlar styleözniteliği
  2. Belge çapındaki tanımlar
5. Animation bildirimleri
6. Sayfa yazarının beyanları
  1. İle elemana Tanımlar styleözniteliği
  2. Belge çapındaki tanımlar
7. Kullanıcının beyanları
8. Kullanıcı aracısının beyanları
İki deklarasyon aynı köken ve öneme sahipse , elemanın ne kadar açık bir şekilde tanımlandığı anlamına gelen özgüllük, bir puanlama hesaplayarak devreye girer.
- Her tanımlayıcı için 100 puan ( #x34y)
- Her sınıf için 10 puan ( .level)
- Her eleman türü için 1 puan ( li)
- :hoverHariç her sahte öğe ( ) için 1 puan:not
Örneğin, seçicinin main li + .red.red:not(:active) p > *24 özelliği vardır.
Görünüm sırası iki tanım aynı köken, önemi ve özgünlüğünü varsa sadece bir rol oynar. Daha sonraki tanımlar belgede daha önceki tanımlardan önce (içe aktarmalar dahil).

— Michael Schmid
kaynak

0

Kod yürütürken, yukarıdan aşağıya okunduğuna inanıyorum, yani son CSS bağlantısı yukarıdaki stil sayfalarında benzer stilleri geçersiz kılacaktır.

Örneğin, iki stil sayfası oluşturduysanız

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

ve her ikisinde de gövde arka plan rengini iki farklı renge ayarlarsınız - style2.css içindeki gövdenin rengi önceliklidir.

Öncelik almak !IMPORTANTistediğiniz sınıf stilini kullanarak veya muhtemelen <link>siparişinizi yeniden düzenleyerek stil önceliği sorununu önleyebilirsiniz .

— Ennam Hoque
kaynak