Специфика CSS - как перекрыть twitter-bootstrap

Я просто наткнулся на специфику css, пытаясь изменить стиль нумерации страниц моей темы.

Я использую twitter-bootstrap в качестве базового шаблона, но хочу изменить нумерацию страниц.

В частности, я хочу удалить границу разбивки на страницы, которая идет с начальной загрузкой с разбивкой на страницы:

Воля-разбиение на страницы / бутстрап

.pagination a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #DDDDDD;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    line-height: 34px;
    padding: 0 14px;
    text-decoration: none;
}

Мне просто нужно это:

.pagination a {

    float: left;
    line-height: 34px;
    padding: 0 14px;
}

Проблема в том, что если я установлю это в своем файле custom.css.scss, то специфичность начальной загрузки будет выше (проверьте это отличное объяснение специфичности), чем у меня. Я даже пробовал и использовал! Important, но это все равно не повысило мою специфику.

Я решил эту проблему, просто используя правило Equal specificity - то, которое идет последним, с такой же специфичностью, является тем, которое имеет значение, и просто поставило:

.pagination a {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #DDDDDD;
        border-image: none;
        border-style: none;
        border-width: 1px 1px 1px 0;
        float: left;
        line-height: 34px;
        padding: 0 14px;
        text-decoration: none;
    }

Но это просто дрянной css, потому что граница мне вообще не нужна ...

Что ты предлагаешь?


css twitter-bootstrap css-specificity will-paginate
person MrWater    schedule 22.01.2013    source источник
comment
Это все время: вы не понимаете специфики. Даже если вы создадите действительно конкретный селектор CSS, который будет намного более конкретным, чем CSS, который вы хотите переопределить, он все равно переопределяет только css, который вы фактически объявляете. Если базовый CSS объявляет значение для границы, а ваш очень конкретный CSS - нет, граница не исчезнет. Вам нужно будет определить границу, чтобы ее не было.   -  person Jhong    schedule 28.01.2013
comment
значит, вы говорите, что специфика относится к атрибуту, а не к классу?   -  person MrWater    schedule 29.01.2013
comment
Я не уверен, что классы ООП - это полезный способ думать об этом. CSS не ведет себя так, как они. Селектор CSS не является отдельным пространством имен. Не переоценивайте конкретность. Специфика - это комбинация селектора CSS, атрибута и порядка определения. По сути, думайте о CSS как о каскадных правилах - они разбираются по порядку, и более поздние правила могут переопределить предыдущие, если они одинаково или более конкретны. Это не сложнее.   -  person Jhong    schedule 29.01.2013
comment
Спасибо, Джонг ... Тогда я могу интерпретировать то, что правила специфичности применяются на уровне свойств, а не столько на уровне селектора. Я имею в виду, что даже если селектор 1 более конкретен, чем 2, если 2 имеет свойства, которых нет у 1 (или наоборот), мой элемент будет иметь сочетание свойств селектора 1 и 2. Единственный способ, который я могу найти, чтобы заставить одни и те же идентичные свойства превосходить другие, - это либо определить свойство как! Important, либо обеспечить, чтобы оно было определено последним.   -  person MrWater    schedule 30.01.2013
comment
да. Потому что это не классы, которые вы настраиваете в пространстве имен, которые компилируются и запускаются - это просто инструкции для средства визуализации, которые анализируются в том порядке, в котором они встречаются. Точно так же, как нанять домашнего декоратора. Если вы уже сказали ему покрасить стену в красный цвет, она будет красной. Если вы позже скажете ему переместить стену, она все равно будет красной, если вы не попросите его снова покрасить ее. Это просто набор инструкций, а не классы.   -  person Jhong    schedule 31.01.2013
comment
Плюс один для аналогии :-) .. Теперь это имеет смысл для меня. Теперь мне интересно, какие могут быть проблемы при использовании! Important часто   -  person MrWater    schedule 31.01.2013

Ответы (1)


arrow_upward
2
arrow_downward

Просто попробуйте border: none; вместо сброса каждого вложенного свойства.

Кроме того, я только что проверил селектор Bootstrap для разбивки на страницы, и он более конкретен:

.pagination ul > li > a, .pagination ul > li > span

Попробуйте использовать этот селектор для своего border: none.

person jgthms    schedule 22.01.2013
comment
Не знаю, слежу ли я за вами здесь. - person MrWater; 22.01.2013
comment
Хммм, я могу получить желаемый результат с помощью: .pagination a { border:none; float: left; line-height: 34px; padding: 0 14px; text-decoration: none; }, но теперь я немного потерялся ... Почему специфика этого больше, чем у начальной загрузки по умолчанию? - person MrWater; 22.01.2013
comment
Зависит от используемого вами точного Bootstrap CSS. Я подумал, что вы использовали текущий, доступный на их веб-сайте, но, возможно, он другой. Только ты можешь сказать. - person jgthms; 23.01.2013