124

W nagłówku HTML, mam to:W jakiej kolejności zastępujesz arkusze stylów CSS?

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

styles.css jest mój arkusz strona specyficzne. master.css to arkusz, którego używam na każdym z moich projektów, aby zastąpić domyślne ustawienia przeglądarki. Który z tych arkuszy stylów ma pierwszeństwo? Przykład: pierwszy arkusz zawiera szczegółowe

body { margin:10px; }

i związane z nimi granice, ale drugi zawiera moje resetuje z

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

w istocie, czy element kaskadowy pracy CSS to samo pod względem referencji stylesheet jak działa w typowych funkcjach CSS? Czy oznacza to, że ostatnia linia jest wyświetlana?

Źródło

2012-02-27 ian5v

Właśnie zdałem sobie sprawę, że będzie lepiej pasował do webmasterów. Czy byłoby lepsze miejsce na opublikowanie tego? – ian5v

Tutaj jest dobrze. – Blender

'body: not (input =" button ")' nie jest prawidłowym selektorem przy okazji. Prawdopodobnie chciałeś podzielić go na 'body, input: not ([type =" button "])'. – BoltClock

130

Zasady reguły CSS kaskadowe są złożone - zamiast próbować parafrazując je źle, ja po prostu odsyłam do specyfikacji:

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

W skrócie: bardziej szczegółowe przepisy zastępują bardziej ogólnego te. Swoistość definiowana jest na podstawie liczby identyfikatorów, klas i nazw elementów, a także tego, czy użyto deklaracji !important. Gdy istnieje wiele reguł o tym samym poziomie "specyficzności", to, który z nich pojawia się jako ostatni, wygrywa.

Źródło

2012-02-27 01:42:33 duskwuff

Nie ma konkretnej reguły dotyczącej kolejności ładowania arkuszy stylów? Rozumiem, jak CSS wyświetla się pod względem specyficzności, ale wtedy założę, że mój arkusz główny zostanie załadowany, chyba że zostanie przesłonięty. – ian5v

Ja * wierzę *, że arkusze stylów są traktowane tak, jakby były ładowane w kolejności, w jakiej są połączone w HTML (nawet jeśli faktycznie wczytują się w systemie), ale nie jestem pewien. – duskwuff

Coś, co przeczytałem wcześniej, sugerowało coś przeciwnego, ale nie mogę powiedzieć tego na pewno. – ian5v

najbardziej specyficzny styl jest stosowany:

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

div { 
    color: red; 
}

Jeśli wszystkie selektorów mają taką samą specyficzność, to najnowsza decleration jest używany:

div { 
    color: red; 
} 

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

w przypadku, body:not([input="button"]) więcej specyficzne, więc używane są jego style.

Źródło

2012-02-27 01:42:53 Blender

Zobacz mój komentarz na pytanie dotyczące tego ostatniego selektora. – BoltClock

Reguła specyficzności utrudni, gdy będziemy musieli nadpisać nie edytowalny arkusz stylów! – KeepMove

To zależy od kolejności ładowania i specyfiki rzeczywistych reguł stosowanych do każdego stylu. Biorąc pod uwagę kontekst twojego pytania, najpierw chcesz załadować ogólny reset, a następnie stronę. Jeśli nadal nie widzisz zamierzonego efektu, musisz przyjrzeć się specyfice zaangażowanych selektorów, o czym inni już wspomnieli.

Źródło

2012-02-27 01:43:36 prodigitalson

Zamówienie ma znaczenie. Ostatnia deklarowana wartość wielokrotnego wystąpienia zostanie podjęta. Proszę zobaczyć tę samą jedną wypracowałem: http://jsfiddle.net/Wtk67/

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


<style> 
    .test{ 
     color:blue; 
    } 

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

Jeśli zamienić kolejność od .test{}, następnie można zobaczyć HTML przyjmuje wartość ostatniego zgłoszonemu CSS

Źródło

2013-07-02 11:25:50

Powinieneś więc dodać najbardziej precyzyjny CSS na końcu. –

Spróbujmy uproszczenie kaskadowy rządzić na przykładzie. Zasady są bardziej szczegółowe dla ogólnych.

Obowiązuje zasada jeden identyfikator pierwszy (na klasy i/lub elementów niezależnie od kolejności)
artykule dotyczą zajęcia nad elementami, niezależnie od kolejności
W przypadku braku klasy lub id, stosuje te generycznych
Powoduje zastosowanie ostatniego stylu w kolejności (kolejność deklaracji na podstawie kolejności ładowania pliku) dla tej samej grupy/poziomu.

Oto kod css i 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>

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

Oto wynik. Bez względu na kolejność plików stylu lub deklarację stylu, na końcu obowiązuje numer id="important" (uwaga na ostatnią deklarację class="deadline", ale nie ma ona żadnego efektu).

Element <article> zawiera <aside> elementu, jednak ostatni zadeklarował stylu wejdą w życie, w tym przypadku article h2 { .. } na trzeci element h2.

Oto wynik na IE11: (Nie ma wystarczającej liczby praw do publikowania wizerunku) DARKBlue: Houston Chronicle Aktualności, DarkGreen: Najnowsze osiągnięcia w Twoim mieście, fioletowy: Houston lokalny Reklama Sekcji Czarny: Następny rozdział

Źródło

2015-07-12 21:13:37

ostatni ładowanie CSS jest panem, który zastąpi wszystkie css z tymi samymi ustawieniami css

Przykład:

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

wyjście dla znacznika h1 będzie czcionki, rozmiar: 30px;

Źródło

2016-01-09 11:19:00 Doodl

Witam. W moim przypadku pierwszy zdefiniowany ".css" jest wczytany jako ostatni. Czy są one stosowane w kolejności, w jakiej są ładowane lub w kolejności, w jakiej zostały zdefiniowane? –

Najlepszym sposobem jest korzystanie z zajęć w jak największym stopniu. W każdym razie unikaj selektorów ID (#). Podczas pisania selektorów za pomocą tylko jednej klasy, dziedziczenie CSS jest łatwiejsze do naśladowania.

Update: Więcej o CSS swoistością w tym artykule: https://css-tricks.com/specifics-on-css-specificity/

Źródło

2016-01-14 19:06:40

Interesująca uwaga, ale jest to raczej komentarz niż odpowiedź ... – AFract

To jest świetny artykuł o specyfice CSS: https://css-tricks.com/specifics-on-css-specificity/ –

podejrzewam ze swoim pytaniu, że masz zduplikowane pozycje, zestaw nadrzędnego, który odnosi się do wszystkich stron, a bardziej konkretnego zestawu, który chcesz przesłonić wartości wzorcowe dla każdej pojedynczej strony. W takim przypadku twoje zamówienie jest poprawne. Master jest ładowany jako pierwszy, a reguły w kolejnym pliku mają pierwszeństwo (jeśli są identyczne lub mają taką samą wagę). Istnieje wysoce zalecany opis wszystkich zasad na tej stronie internetowej. http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Kiedy zacząłem z rozwojem frontowym, strona ta wyjaśniła wiele pytań.

Źródło

2016-11-30 13:11:41 user3094826

Tak, to działa tak samo, jak gdyby były w jednym arkuszu, jednak: Sprawy

obciążenia zamówienie!

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

W powyższym kodzie, nie ma gwarancji, że master.css załaduje po styles.css. Dlatego, jeśli master.css zostanie załadowany szybko, a styles.css chwilę potrwa, styles.css stanie się drugim arkuszem stylów, a wszelkie reguły o tej samej specyfice od master.css zostaną nadpisane.

Najlepiej umieścić wszystkie swoje reguły w jednym arkuszu (i minąć) przed wdrożeniem.

Źródło

2018-01-23 07:58:45

W jakiej kolejności zastępujesz arkusze stylów CSS?

Odpowiedz

obciążenia zamówienie!

Powiązane problemy