Dalam urutan apa CSS stylesheet menimpa?

157

Di header HTML, saya mendapatkan ini:

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

styles.cssadalah lembar spesifik halaman saya. master.cssadalah lembar yang saya gunakan pada setiap proyek saya untuk mengesampingkan default browser. Manakah dari lembar gaya ini yang mendapat prioritas? Contoh: lembar pertama berisi spesifik

body { margin:10px; }

Dan batas terkait, tetapi yang kedua berisi ulang saya dari 

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

Pada dasarnya, apakah elemen cascading CSS bekerja sama dalam hal referensi stylesheet seperti halnya dalam fungsi CSS yang khas? Berarti bahwa baris terakhir adalah yang ditampilkan?

css overriding stylesheet ian5v
sumber
Saya baru saja menyadari ini akan lebih cocok untuk Webmaster. Apakah ada tempat yang lebih baik untuk memposting ini?
ian5v
10
Di sini bagus.
Blender
4
body:not(input="button")Omong-omong, bukan pemilih yang valid. Anda mungkin bermaksud membaginya menjadi body, input:not([type="button"]).
BoltClock
Itu menarik. Saya tidak percaya saya pernah melihat sintaks seperti itu sebelumnya. Saya masih baru, tetapi kurung ganda itu asing bagi saya.
ian5v
tanda kurung itu untuk penyeleksi atribut: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: mungkin Anda ingin mengganti urutan stylesheet: Jenderal Anda master.cssharus memuat pertama, maka jenderal Anda harus memuat terlebih dahulu, maka cara ini lebih mudah untuk menolak gaya master di blog Anda styles.css.
Gr

Jawaban:

163

Aturan untuk cascading aturan CSS rumit - daripada mencoba memparafrasekannya dengan buruk, saya hanya akan mengarahkan Anda ke spesifikasi:

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

Singkatnya: aturan yang lebih spesifik menggantikan aturan yang lebih umum. Spesifisitas didefinisikan berdasarkan berapa banyak ID, kelas, dan nama elemen yang terlibat, serta apakah !importantdeklarasi itu digunakan. Ketika beberapa aturan dengan "tingkat spesifisitas" yang sama ada, mana yang muncul menang terakhir.

duskwuff -inactive-
sumber
1
Lalu tidak ada aturan khusus tentang bagaimana urutan stylesheet dimuat? Saya mengerti bagaimana tampilan CSS dalam hal spesifisitas, tetapi kemudian saya akan menganggap lembar master saya akan dimuat kecuali diganti.
ian5v
11
Sebenarnya, !importantberpartisipasi langsung dalam kaskade, dan tidak ada hubungannya dengan kekhususan. Spesifisitas terkait dengan penyeleksi, sedangkan !importantdigunakan dengan deklarasi properti. (Jadi, Anda benar mengatakan bahwa aturannya rumit
!;
2
Jadi, apakah stylesheet memuat dengan cara yang sama seperti elemen, pengambilan prioritas terakhir jika mereka memiliki spesifisitas yang sama?
ian5v
3
@iananananan: Pada dasarnya, browser tidak pernah melihat CSS dalam hal stylesheet individu. Jika ada beberapa stylesheet, mereka semua diperlakukan seolah-olah mereka satu stylesheet raksasa, dan aturan dievaluasi sesuai.
BoltClock
2
@ user34660 komentar BoltClock adalah dari perspektif styling CSS. Anda benar bahwa lembar gaya disimpan terpisah di DOM, tetapi pemisahan itu tidak memengaruhi cara gaya tersebut diterapkan pada apa pun.
duskwuff -inactive-
31

Gaya paling spesifik diterapkan:

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

div {
  color: red;
}

Jika semua penyeleksi memiliki spesifisitas yang sama, maka deklerasi terbaru digunakan:

div {
  color: red;
}

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

Dalam kasus Anda, body:not([input="button"])lebih spesifik sehingga gayanya digunakan.

Blender
sumber
1
Lihat komentar saya pada pertanyaan tentang pemilih terakhir itu.
BoltClock
1
Aturan kekhususan membuat segalanya lebih sulit ketika kita perlu mengganti stylesheet yang tidak dapat diedit!
Ari
23

Ketertiban memang penting. Nilai yang dinyatakan terakhir dari banyak kejadian akan diambil. Silakan lihat yang sama yang saya kerjakan: http://jsfiddle.net/Wtk67/

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


<style>
    .test{
        color:blue;
    }

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

Jika Anda menukar urutan .test{}, maka Anda dapat melihat HTML mengambil nilai yang terakhir dinyatakan dalam CSS

Roy MJ
sumber
3
Jadi, Anda harus menambahkan CSS paling spesifik yang terakhir.
live-love
17

CSS pemuatan terakhir adalah THE MASTER, yang akan menimpa semua css dengan pengaturan css yang sama

Contoh:

<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;
}

Output untuk tag h1 akan berukuran font: 30px;

Doodl
sumber
1
Hai. Dalam kasus saya yang didefinisikan pertama .cssdimuat terakhir. Apakah mereka diterapkan agar dimuat atau agar didefinisikan?
Eugen Konkov
Terima kasih, inilah penjelasan yang saya cari.
HunterTheGatherer
7

Mari kita coba menyederhanakan aturan cascading dengan sebuah contoh. Aturan berjalan lebih spesifik untuk umum.

  1. Terapkan aturan ID yang pertama (lebih dari kelas dan / atau elemen terlepas dari urutannya)
  2. Menerapkan kelas pada elemen apa pun urutannya
  3. Jika tidak ada kelas atau id, terapkan yang generik
  4. Menerapkan gaya terakhir dalam urutan (perintah deklarasi berdasarkan urutan pemuatan file) untuk grup / level yang sama.

Berikut adalah kode css dan html;

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

Inilah gaya css

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

Inilah hasilnya. Tidak peduli urutan file gaya atau deklarasi gaya, id="important"berlaku di akhir (perhatikan yang class="deadline"dinyatakan terakhir tetapi tidak berpengaruh).

The <article>elemen berisi <aside>elemen, namun gaya lalu menyatakan akan berlaku, dalam hal ini article h2 { .. } pada elemen h2 ketiga.

Berikut adalah hasil pada IE11: (Tidak cukup hak untuk mengirim gambar) DarkBlue: Houston Chronicle News, DarkGreen: Perkembangan terbaru di kota Anda, Ungu: Bagian Iklan Lokal Houston, Hitam: Bagian berikutnya

masukkan deskripsi gambar di sini

Kagan Agun
sumber
6

Itu tergantung pada urutan pemuatan dan kekhususan aturan aktual yang diterapkan pada masing-masing gaya. Mengingat konteks pertanyaan Anda, Anda ingin memuat pengaturan ulang umum Anda terlebih dahulu, kemudian halaman yang spesifik. Kemudian jika Anda masih tidak melihat efek yang diinginkan, Anda perlu melihat kekhususan penyeleksi yang terlibat seperti yang telah ditunjukkan orang lain.

prodigitalson
sumber
2

EDIT: Apr 2020, menurut komentar @ LeeC, ini tidak lagi terjadi

Ya, kerjanya sama seperti jika mereka berada dalam satu lembar, namun:

Muat Urutan Pesanan!

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

Dalam kode di atas, tidak ada jaminan yang master.cssakan memuat setelah styles.css. Oleh karena itu, jika master.cssdimuat dengan cepat, dan styles.cssperlu waktu, styles.cssakan menjadi stylesheet kedua, dan aturan apa pun dari kekhususan yang sama master.cssakan ditimpa.

Sebaiknya masukkan semua aturan Anda ke dalam satu lembar (dan perkecil) sebelum digunakan.

n_i_c_k
sumber
Pertimbangkan kasus untuk style sheet alternatif hampir identik yang dimuat dari bagian <head> halaman, yang berisi atribut media bersyarat untuk memuat styleheet yang khusus untuk smartphone dan tablet. Dalam hal ini, logika yang ditentukan dalam media harus benar-benar eksklusif untuk setiap lembar gaya jika urutan pemuatan tidak ditentukan.
Lindsay Haisley
@n_i_c_k Jawaban Anda salah. Urutan deklarasi adalah yang penting, bukan urutan muatan . Saya baru saja menguji ini dengan Fiddler, dengan menghentikan unduhan master.css, dan membiarkan styles.cssmemuat sepenuhnya. Lalu, saya biarkan master.cssmemuat. Gaya "tumpang tindih" dari master.cssmasih diterapkan - dan rendering diblokir sampai master.cssdimuat dan diuraikan. Catatan : Saya mencoba rel=preloadpada master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.
LeeC
Terima kasih @ LeeC, saya tahu pada saat penulisan jawaban saya benar, tetapi saya akan mengambil kata-kata Anda untuk itu sudah diperbaiki sekarang dan edit jawaban saya.
n_i_c_k
0

Saya menduga dari pertanyaan Anda bahwa Anda memiliki pilihan duplikat, set master, yang berlaku untuk semua halaman, dan set yang lebih spesifik yang Anda ingin timpa nilai master untuk setiap halaman individual. Jika itu masalahnya, maka pesanan Anda sudah benar. Master dimuat pertama dan aturan dalam file selanjutnya akan diutamakan (jika mereka identik atau memiliki bobot yang sama). Ada deskripsi yang sangat direkomendasikan dari semua aturan di situs web ini http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Ketika saya mulai dengan pengembangan front-end, halaman ini membereskan begitu banyak pertanyaan.

pengguna3094826
sumber
0

Ini adalah kaskade yang mendefinisikan prioritas deklarasi. Saya dapat merekomendasikan spesifikasi resmi; bagian ini mudah dibaca.

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

Berikut ini memiliki efek pada penyortiran, dalam urutan prioritas menurun.

  1. Kombinasi asal, dan kepentingan:

    1. Transition deklarasi
    2. Deklarasi agen pengguna ditandai dengan !important
    3. Deklarasi pengguna ditandai dengan !important
    4. Deklarasi penulis halaman ditandai dengan !important
      1. Definisi pada elemen dengan styleatribut
      2. Definisi seluruh dokumen
    5. Animation deklarasi
    6. Deklarasi penulis halaman
      1. Definisi pada elemen dengan styleatribut
      2. Definisi seluruh dokumen
    7. Deklarasi pengguna
    8. Deklarasi agen pengguna

  2. Jika dua deklarasi memiliki asal dan kepentingan yang sama, spesifikasi, yang berarti seberapa jelas elemen didefinisikan, ikut bermain, menghitung skor.

    • 100 poin untuk setiap pengidentifikasi ( #x34y)
    • 10 poin untuk setiap kelas ( .level)
    • 1 poin untuk setiap jenis elemen ( li)
    • 1 poin untuk setiap elemen semu ( :hover) tidak termasuk:not

    Misalnya, pemilih main li + .red.red:not(:active) p > *memiliki kekhususan 24.

  3. The urutan tampilan hanya memainkan peran jika dua definisi memiliki asal yang sama, pentingnya dan kekhususan. Definisi selanjutnya mendahului definisi sebelumnya dalam dokumen (termasuk impor).

Michael Schmid
sumber
0

Saya percaya ketika mengeksekusi kode, itu dibaca dari atas ke bawah, artinya tautan CSS terakhir akan menimpa gaya yang sama di setiap style sheet di atasnya.

Misalnya, jika Anda membuat dua style sheet 

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

dan dalam kedua hal ini, Anda mengatur warna latar belakang tubuh menjadi dua warna yang berbeda - warna tubuh dalam style2.css akan diprioritaskan.

Anda dapat menghindari masalah prioritas penataan dengan menggunakan !IMPORTANTdi dalam gaya kelas yang ingin Anda prioritaskan, atau mungkin mengatur ulang <link>pesanan Anda .

Ennam Hoque
sumber