Как выбрать, какое правило CSS использовать из нескольких таблиц стилей

Question

У меня есть bootstrap.css и login.css прилагается к index.php. В пределах index.php существует несколько элементов формы, таких как input type['text']. Однако оба прикрепленных файла CSS нацелены на input type['text']. Я bootstrap.css связан над моим другим файлом CSS:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="css/login.css"> 

Как я могу определить, что я хочу input type['text'] использовать правила, указанные в login.css скорее, используя правила из bootstrap.css? Обычно я требую bootstrap.css, но делаю это с тобой и сейчас, реализую свои собственные правила, которые я не могу, так как правила от bootstrap.css отображаются сначала, так как они перечислены первыми.

Answer 1

Чем конкретнее вы определяете свой css, тем больше приоритетов он получает в CSS. Вам нужно определить свои пользовательские правила, более релевантные, чем загрузочные. Пример:

p.test { 
 
    color: green; 
 
} 
 
.test { 
 
    color: blue; 
 
}

<p class="test"> teststring </p>

Вы видите, что p.test сильнее .test хотя .test приходит после p.test. желающий эта помогло. , если вы удалите p из p.div, вы увидите, что цвет становится синим, потому что заказ имеет значение только в том случае, если оба правила равны по определенности.

.test { 
 
    color: green; 
 
} 
 
.test { 
 
    color: blue; 
 
}

<p class="test"> teststring </p>

Answer 2

хорошо, есть что-то вроде "CSS Rule Hirarchie" в которую можно использовать для disired ЭФФЕКТ. Короче: наиболее «верхний» CSS-правило выигрывает игру.

Если вы разрабатываете Chrome или FF, вы можете отлаживать что-либо с помощью инструментов разработчика (в этом случае я обожаю хром) и посмотрите, почему он перезаписывается Bootstrap. В основном это правило уровня CSS или нечто подобное.

Я предлагаю вам использовать свой собственный класс на Элементе Wrapper и переопределить стили по вашему желанию. Посмотрите на мой пример ниже, чтобы получить Идею, как я это понимаю.

Sidenote: Я думаю, this Учебное пособие из CSS-Tricks описывает, что происходит с Правилами CSS и как наиболее конкретное правило входит в игру.

/* Just a Basic Styling */ 
 
ul { list-style:none; } 
 
a { text-decoration: none; font-family: Verdana; color:black; } 
 

 

 
/* Lets make all list elements Blue. This should be familiar for you, 
 
* this is the standard overwriting of css classes (is this called so?). 
 
*/ 
 
.list li a { color: blue; } 
 

 

 
/* Look at this Example now, we specify the 3rd list Element. 
 
* As this rule is more specified as the rule from line 9, 
 
* this rule takes effect on the 3rd line, the other ones will stay blue. 
 
* + 
 
* As a proof that you can't "override" this rule, I have put one 
 
* line below to show you, that even another low lvl rule can't override it. 
 
* Line 20 is still more specified then Line 21, even it is comes after it. 
 
*/ 
 
.list li:nth-child(3) a { color:pink; } 
 
.list li a { color:blue; } 
 

 
/* Another Example of higher CSS Hirarchie would be this line. 
 
* We go one DOM Element even higher, and guess what: 
 
* If you comment out this line here, it will take effect. 
 
*/ 
 
/* .wrapper li:nth-child(3) a { color:seagreen; } */

<div class='wrapper'> 
 
    <ul class='list'> 
 
    <li><a href='#'> Magic Link </a></li> 
 
    <li><a href='#'> Another Link </a></li> 
 
    <li><a href='#'> Rule over the wrapper Link </a></li> 
 
    </ul> 
 
</div>