Можа адзін CSS файл мае прыярытэт над іншым файлам CSS?

Я знаходжуся ў Лондане працуе над дадаткам, і HTML/CSS хлопец знаходзіцца ў Нью-Ёрку. Ён мне пасылае абнаўлення штодня па электроннай пошце, як у нас няма кантролю крыніцы ня створаны, што мы абодва можам выкарыстоўваць, я пастаянна ўносіць невялікія змены ў яго CSS, таму кожны раз, калі я атрымліваю новы файл ад яго, я павінен паўторна ўсіх маіх змяненняў да яго, і, відавочна, больш працы я раблю, тым даўжэй гэта адбываецца кожны раз.

У мяне быў ідэя зрабіць свае ўласныя індывідуальныя табліцы стыляў, але ёсць спосаб, каб сказаць браўзэр, каб даць маім sylesheet больш высокі прыярытэт і перазапісаць любога з яго стыляў, якія маюць такое ж імя і атрыбуты класа?

Гэта не збіраецца быць публічным сайтам, так што мы толькі будзем падтрымліваць апошнія браўзэры.

42
Няма Францыска, гэта не
дададзена аўтар Owen, крыніца
проста ўключыць табліцу стыляў, як апошні на старонцы і выкарыстоўваць больш высокую спецыфічнасць для вашых правілаў
дададзена аўтар fcalderan, крыніца
Пакуль правілы маюць аднолькавую спецыфічнасць, апошні павінен быць загружаны, будзе мець прыярытэт.
дададзена аўтар ralph.m, крыніца
магчыма дублікат Што такое парадак загрузкі файлаў CSS у HTML-старонкі?
дададзена аўтар Francisco Corrales Morales, крыніца

8 адказы

Гэта залежыць ад таго, як вы ўсталюеце іх у загалоўку. Дык нешта, як гэта будзе працаваць:

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

Апошнія з іх будуць падабраныя.

And an helpful link about stylesheets here: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

Глядзіце таксама: предшествования ў CSS , калі вышэй не працуе для вас.

Спадзяюся, гэта зразумела.

58
дададзена
Гэта рашэнне з'яўляецца настолькі відавочным, што я адчуваю сябе крыху па-дурному не думаць пра гэта сабе адразу
дададзена аўтар Owen, крыніца
Працуе як шарм
дададзена аўтар Daria, крыніца
Няма праблемы, Часам я не задаю пытанне з відавочнымі адказамі таксама. Гэта можа здарыцца часам. :)
дададзена аўтар Kees Sonnema, крыніца
Маглі б вы ўставіць код? там павінна быць памылка друку дзе-небудзь ці не маюць аднолькавы код у абодвух файлах. @ user34660
дададзена аўтар Kees Sonnema, крыніца
Добра. Я дадам, што на гэты пост таксама. я ніколі не думаў аб гэтым правіле.
дададзена аўтар Kees Sonnema, крыніца
Акрамя мяне першы выкарыстоўваецца, калі ў мяне ёсць спіс, як гэта.
дададзена аўтар user34660, крыніца
См предшествования правілаў CSS . У маім выпадку я меў атрыбут загалоўка і змяняе рэчы.
дададзена аўтар user34660, крыніца

Я Personaly строга адгаварыць выкарыстоўваць! Важна. Даведайцеся, што вельмі важна з .

Вы павінны ведаць:

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

Заўсёды важней (парадку Apperance не мае значэння ў дадзеным выпадку):

.some-class a {
    color:blue;
}

Калі ў вас ёсць (дзве дэкларацыі з тым жа ўзроўнем):

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

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

Пазней аб'яву выкарыстоўваецца. Тое ж самае, калі гаворка ідзе пра файлы, уключаных у галаўны пазнакі, як пісаў @Kees Sonnema.

9
дададзена
Ўзгоднена. Важна! Гэта апошні прыстанак якіх у роспачы.
дададзена аўтар Dave Kaye, крыніца
Гэта адзін быў сапраўды карысным дзякуй!
дададзена аўтар Ogdila, крыніца

правілы CSS прымяняюцца паслядоўна. Такім чынам, усё, што вам трэба зрабіць, гэта ўключыць ваш CSS нарэшце, пасля ўсіх астатніх.

4
дададзена
дададзена аўтар Andrew, крыніца

правілы CSS з'яўляюцца паслядоўнымі, вы павінны зрабіць дзве рэчы на ​​вашых HTML-файлаў

  1. Include your CSS as the last css
  2. Add !important on all CSS attributes in your CSS file Eg: position : absolute !important;

якія павінны служыць вашай мэты

2
дададзена
Я стараюся не выкарыстоўваць! Важна, калі ў мяне няма, але дзякуючы
дададзена аўтар Owen, крыніца
гэта выгляд атрымлівае абавязковыя атрыбуты, калі ваш элемент мае Важны! раней даданыя да яго. таму ў выпадку аленевая скура вашага папярэдняга CSS мае нейкі! важна яго не патрабуецца, але ў выпадку, калі яны маюць важнае значэнне, чым вы павінны быць асцярожныя з CSS
дададзена аўтар Varun, крыніца
@Varun: Адзіны спосаб перавызначыць важна , каб напісаць больш канкрэтны важна !. Ён можа атрымаць складана, гэта не рэкамендуецца.
дададзена аўтар Esteban, крыніца

Дзесьці я чытаў, што гаворка ідзе не пра нейкую файл CSS выклікаецца да або пасля, але на самой справе, які загружае першы. Напрыклад, калі ваш першы файл CSS дастаткова доўга, каб трымаць нагрузку ў той час як адзін пад (які па асноўнай тэорыі павінна мець больш высокі прыярытэт) ужо загружаны, гэтыя лініі, загружаныя пасля будуць мець больш высокі прыярытэт. Гэта складана, але <�моцны> мы павінны ведаць пра гэта ! Тэхніка са спецыфікай здаецца законным мне. Такім чынам, больш канкрэтны (#someid .someclass Div, а не .someclass справы) з больш высокім прыярытэтам.

2
дададзена

Я знайшоў пост тут у StackOverflow. Я думаў, што гэта можа дапамагчы вам.

Эфектыўны спосаб аб'яднаць 2 вялікіх CSS файлаў

Калі вы хочаце на самай справе аб'яднаць вашыя файлы, то гэта будзе карысна, я думаю.

Указанне CSS у больш пэўным чынам таксама дапаможа вам.

як:

td.classname{}
table.classname{}
1
дададзена

Вось як гэта працуе:

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

другі-style.css:

@import 'third-style.css';

Апошні стыль імпартаваны з'яўляецца адзін, што ўсе правілы прытрымліваюцца. Напрыклад:

першы-style.css:

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

другі-style.css:

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

трэці-style.css:

p{
    color:green;
    size:10%
}

Якія атрымлівае стылі будуць:

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

Note: if you add !important rules, it's different. For example:

першы-style.css:

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

другі-style.css:

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

трэці-style.css:

p{
    color:green;
    size:10%
}

Вынік будзе выглядаць так:

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

Я спадзяюся, што гэта дапамагае!

0
дададзена

Я выкарыстоўваю прыярытэт правілы CSS, як паказана ніжэй:

  1. Першае правіла як убудаваны CSS з HTML, які будзе Мардж любога цікавае CSS.

  2. Другое правіла ў якасці ключавога слова выкарыстоўваць! Важнае значэнне ў дэкларацыі CSS пасля значэння.

  3. Трэцяе правіла ў якасці HTML загаловак табліцы стыляў прыярытэту спасылку парадку (асноўнай табліцы стыляў CSS пасля карыстацкіх стыляў CSS).

У асноўным карыстальнік хоча выкарыстоўваць трэцяе правіла таксама хоча маржу самазагрузкі CSS для карыстацкіх CSS, прыклад ніжэй:

<!-- 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">
0
дададзена