Czy jeden plik CSS może mieć wyższy priorytet niż inny plik CSS?

Question

Jestem w Londynie, pracuję nad aplikacją, a facet html/css jest w Nowym Jorku. Wysyła mi aktualizacje codziennie przez e-mail, ponieważ nie mamy skonfigurowanej kontroli źródła, z której możemy korzystać jednocześnie, ciągle wprowadzam małe zmiany w jego css, więc za każdym razem, gdy otrzymuję od niego nowy plik, muszę ponownie zastosować wszystkie moje zmiany do tego, i oczywiście im więcej pracy wykonuję, tym dłużej trwa to.

Wpadłem na pomysł stworzenia własnego arkusza stylów, ale czy jest jakiś sposób, aby powiedzieć przeglądarce, aby nadała mojemu szablonowi wyższy priorytet i nadpisać dowolny styl, który ma tę samą nazwę klasy i atrybuty?

To nie będzie strona publiczna, więc będziemy obsługiwać najnowsze przeglądarki.

Answer 1

To zależy od sposobu ustawienia ich w nagłówku. Tak więc coś takiego zadziała:

<link rel="old stylesheet" href="path/to/style.css" /> 
<link rel="newer stylesheet" href="path/to/style.css" /> 
<link rel="newest stylesheet" href="path/to/style.css" /> 

Ten ostatni zostanie odebrany.

i jako związek o stylów tutaj: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

Zobacz także: Precedence in CSS Jeśli powyższe nie działa dla Ciebie.

Mam nadzieję, że jest jasne.

Answer 2

Reguły CSS są stosowane sekwencyjnie. Tak więc, wszystko co musisz zrobić, to dołączyć swój CSS na końcu, po wszystkich innych.

Answer 3

CSS sekwencyjny, należy zrobić dwie rzeczy na plikach html

1. Dołącz CSS jako ostatni css
2. Dodaj! Ważny na wszystkie atrybuty CSS w pliku css Eg: position : absolute !important;

Które powinny służyć Twojemu celowi

Answer 4

Osobisty bezwzględnie zniechęcam do użycia! Dowiedz się, co jest naprawdę ważne od here.

Powinieneś wiedzieć:

.some-class .some-div a { 
    color:red; 
} 

jest zawsze ważniejsza niż (rzędu wyglądem nie ma znaczenia w tym przypadku):

.some-class a { 
    color:blue; 
} 

Jeśli masz (dwie deklaracje o tym samym poziomie) :

.some-class .some-div a { 
    color:red; 
} 

.some-class .some-div a { 
    color:blue; 
} 

Późniejsza deklaracja jest używana. To samo dotyczy plików zapisanych w nagłówku, tak jak napisał @Kees Sonnema.

Answer 5

Znalazłem post tutaj w stackoverflow. Myślałem, że to może ci pomóc.

An efficient way to merge 2 large CSS files

Jeśli szukasz faktycznie scalić pliki potem będzie to przydatne, chyba.

Pomocne będzie również określenie CSS w bardziej szczegółowy sposób.

jak:

td.classname{} 
table.classname{} 

Answer 6

Gdzieś czytałem, że nie chodzi tu o których CSS plik nazywa się przed lub po, ale w rzeczywistości, która ładuje pierwszy. Na przykład, jeśli twój pierwszy plik CSS jest wystarczająco długi, aby kontynuować ładowanie, a ten pod (który według podstawowej teorii powinien mieć wyższy priorytet) już załadowany, te wiersze załadowane po będą miały wyższy priorytet. To trudne, ale musimy być tego świadomi ! Technika ze specyfiką wydaje mi się uzasadniona. Tak więc bardziej szczegółowy (#someid .someclass div zamiast .someclass div) wyższy priorytet.

Answer 7

To działa tak:

<link rel="stylesheet" type="text/css" href="first-style.css"> 
<link rel="stylesheet" type="text/css" href="second-style.css"> 

drugiej style.css:

@import 'third-style.css'; 

Ostatni styl importowany jest jeden, że wszystkie zasady trzymać. Np

pierwszej arkusz.css:

body{ 
    size:200%; 
    color:red; 
} 

drugiej arkusz.css:

@import 'third-style.css'; 
p{ 
    color:red; 
} 

trzeciego arkusz.css:

p{ 
    color:green; 
    size:10% 
} 

Uzyskane stylów byłoby być:

body{ 
    size:200%; 
    color:red; 
} 
p{ 
    color:green; 
    size:10% 

Uwaga: jeśli dodasz! Ważne zasady, to jest inne. Na przykład:

pierwszej arkusz.css:

body{ 
    size:200% !important; 
    color:red !important; 
} 

drugiej arkusz.css:

@import 'third-style.css'; 
p{ 
    color:red; 
} 

trzeciego arkusz.css:

p{ 
    color:green; 
    size:10% 
} 

wynik byłby być:

body{ 
    size:200% !important; 
    color:red !important; 
} 

Mam nadzieję, że to pomoże!

Answer 8

używam CSS priorytetową zasadę jak poniżej:

1. Pierwsza reguła jako inline CSS z HTML, który będzie Marge żadnego kinda css.

2. Druga zasada jako użycie słowa kluczowego! Ważna w deklaracji css po wartości.

3. Trzecia zasada jako kolejność priorytetów nagłówka stylu nagłówka HTML (główny arkusz stylów CSS po niestandardowym arkuszu stylów CSS).

Zasadniczo użytkownik chce korzystać z trzecią regułę również chcą marge bootstrap CSS niestandardowych css, przykład poniżej:

<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- App Custom CSS --> 
<link rel="stylesheet" href="assets/css/custom-style.css">