У Compass / Blueprint есть CSS-правило «body.bp table» и «body.bp td», которое портит все таблицы, какой обходной путь? - PullRequest
Новая
       31

У Compass / Blueprint есть CSS-правило «body.bp table» и «body.bp td», которое портит все таблицы, какой обходной путь?

0 голосов
/ 05 ноября 2010

У меня есть определения CSS, такие как 

.one-table
  width: 500px

.one-table td
  padding: 0

но так как у Compass / Blueprint 0.8.17 есть 

body.bp table { width: 100% }
body.bp td { padding: 4px }

так что мои таблицы испорчены. И добавление table.one-table тоже не поможет. Я думаю, что это проигрывает специфичности ... что меня весьма удивляет, потому что класс находится прямо на столе, в то время как у другого класс применяется к body. Почему это переопределено и что является хорошим обходным путем?

Я не могу использовать id, потому что это шаблон, и мне нужно сделать его достаточно универсальным. Я также неохотно пользуюсь !important, потому что, если позже в IE css def тоже нужно будет использовать значение важный. Я не могу перейти на новейший компас, потому что это может означать исправление всего сайта. спасибо.

1 Ответ

1 голос
/ 05 ноября 2010

Вот как рассчитать Специфичность CSS .Селектор идентификатора имеет специфичность 100, селектор класса 10 и селектор элемента 1. Чтобы вычислить специфичность CSS, просто сложите значения.

body.bp table специфичность равна 12 (1 + 10 + 1) иtable.one-table равно 11 (1 + 10), поэтому body.bp table выигрывает.

Чтобы исправить это, сохраняя класс one-table, вы можете попробовать использовать следующие селекторы: 

# Specifity is 20 (vs 12).
.bp .one-table
  width: 500px

# Specifity is 21 (vs 12).
.bp .one-table td
  padding: 0

Или вы можете просто использовать те же селекторы и переопределить правила проекта.Эти правила будут применяться ко всем таблицам. 

# This must come after the blueprint rules.
body.bp table
  width: 500px

body.bp td
  padding: 0

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

+blueprint
...