Отметить правило CSS как менее важно?

Есть ли способ отметить правило CSS как менее важное, так что он не отменяет последующее правило, даже если первое правило имеет более высокую специфику? Например, скажем, в моем файле CSS есть следующее:

#inputDiv input[type="text"]{
    width:125px;
}

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

Идея, по которой я собираюсь, состоит в том, что все поля ввода текста, которые являются дочерними элементами div "inputDiv", получают ширину 125 пикселей, за исключением определенных конкретных входов, которые получают некоторую другую ширину. Проблема в том, что первое объявление переопределяет объявления определенных элементов.

Я пробовал следующее:

  • Добавить важную для каждой конкретной ширины. Работы, но многие утверждают (правильно, я думаю), что! Важно избегать, и это довольно громоздко, поскольку оно должно быть добавлено к каждому элементу с определенной шириной.
  • Prepend #inputDiv для каждого из определенных селекторов, т.е. #inputDiv # differentInput1 Опять же, работает и избегает проблем с использованием! важно, но все же громоздко, как это нужно делать с каждым элементом.

Можно ли просто сказать, что элементы в первом объявлении менее важны и не должны переопределять что-либо?

ОТВЕТЫ

Ответ 1

Нет никакого способа сделать это, поскольку это противоречит CSS так же, как !important - делать противоположное было бы так же оскорбительно. Ваш единственный вариант - полагаться на специфику селектора. Вы можете написать это способом, который не так громоздки, например, используя класс для inputDiv вместо идентификатора.

Ответ 2

возможно, способ решить вашу проблему или ответить на ваш вопрос, вы можете попробовать что-то вроде этого

(http://jsfiddle.net/6aAF5/)

<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
    <div class="inputDiv"> normal</div>
</p>


<style type="text/css">
    .inputDiv {
        background-color:green;
        width:200px;
        height:20px;
    }
    .inputDiv.big {
        background-color:red;
        width:400px;
    }
    .inputDiv.middle {
        background-color:lime;
        width:100px;
    }
    .inputDiv.small {
        background-color:orange;
        width:50px;
    }
</style>

и небольшое объяснение важности

! important в css файле используется для переопределения стилей, которые напрямую относятся к html. это означает, что если у вас есть

<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>

<style type="text/css">

    /* this changes the styling */
    .isItImportant {
        background-color:green !important;
    }


    /* this doesn't change anything */
    .isItImportant {
        background-color:fuchsia;
    }

</style>

(http://jsfiddle.net/6aAF5/2/)

Ответ 3

Ну, есть способы достичь того, чего вы хотите (если вы не хотите много менять),

  • Измените свой div id="inputDiv" на имя класса class="inputDiv" и измените селектор css на .inputDiv. Таким образом, ваше 1-е объявление не будет отменять ваши заявления о продолжении.

  • Используйте LESS или SASS, которые позволяют вам использовать правила CSS для пространства имен.

  • И, наконец, вы можете переопределить (нежелательные) стили с помощью jQuery, но это лишние накладные расходы.

PS: Быть описательным в CSS полезно, хотя и громоздко.

Ответ 4

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

Например, вместо:

#inputDiv input[type="text"]{
    width:125px;
}

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

Вы можете попробовать:

input[type="text"]{
    width:125px;
}

.differentInput1{
    width:25px;
}

.differentInput2{
    width:500px;
}

Если вам нужна более конкретная специфика, что-то вроде этого также будет работать:

.inputDiv input[type="text"]{
    width:125px;
}

.inputDiv .differentInput1{
    width:25px;
}

.inputDiv .differentInput2{
    width:500px;
}

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

http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/ http://oocss.org/