0

Есть страничка. К ней подключен bootstrap.

/* CSS должен применяться после bootstrap.min.css,
   но StackOverflow этого не позволяет */
label {
    font-weight: 100;
}

.search-from-group .input-group { 
    width: 40%;
    margin: 0 auto;
}

input {
    border-radius: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container search-from-group">
   <div class="row text-center">
    <form action="" method="get">
        <p class="text-center"><label for="link-to-group-field">1212sdfле:</label></p>
        <div class="input-group">
            <input placeholder="https://vk.com/licey_pri_ulgtu" class="form-control" id="link-to-group-field" name="link-to-group" type="text">
        </div>
    </form>
   </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Обратите внимание на style input'а. Только написав напрямую, в теге, border-radius: 10px получается изменить радиус закругления. Но если вынести стиль в отдельный файл и убрать style в теге, то стиль не применяется.

input {
    border-radius: 50px !imortant;
}
#link-to-group-field {
    border-radius: 50px !imortant;
}

Ни одна из этих конструкций не хочет работать. Вопросов несколько: почему? Как узнать приоритеты, который расставил браузер? Почему не работает !important?

3
  • А если вообще не писать ни important, ни imortant?
    – andreymal
    4 фев 2017 в 17:23
  • Без important не работает.. 4 фев 2017 в 17:26
  • Блин, я хотел написать ответ про веса селекторов, но не смог найти внятного объяснения в стандарте CSS3, напишите кто-нибудь за меня)
    – andreymal
    4 фев 2017 в 19:21

1 ответ 1

2

Такого понятия нет в CSS - !imortant, наверно вы хотели написать !important.
Для переопределения стилей вы просто конкретно укажите индетификатор input

#link-to-group-field{
border-radius: 10px;
}
15
  • Походу пора спать.. Спасибо. Но все же, можно ли как-то понять, как расставил приоритеты браузер? А то получится, что бутстраповский класс скажет !important, позже я захочу переопределить и тд и тп. Можно ли как-то это отследить? 4 фев 2017 в 17:25
  • Если хотите перекрыть стили написанных именно в элементе можете использовать !important, но запомните, многие IE игнорируют данное значение, а для браузера важен порядок описания стилей, кто позже, тот и приоритетней.
    – Arsen
    4 фев 2017 в 17:30
  • @IvanBlohin без примера сказать про приоритеты трудно (и по-хорошему !important использовать не стоит вообще никогда)
    – andreymal
    4 фев 2017 в 17:32
  • Файл моих стилей идет после бутсраповского. style из тега я убираю. Почему не становится приоритетнее мой стиль? 4 фев 2017 в 17:33
  • @IvanBlohin Значит вы что то не то сделали )) если есть ссылка, покажите посмотрим, если в первом файле стили установленны уже с !important, далее вы наверно не сможете преопределить стили
    – Arsen
    4 фев 2017 в 17:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.