Приоритет CSS

Question

Приоритет CSS

Чтобы расширить ответ TigerhawkT3, причина, по которой операция yield возвращает None в вашем коде, состоит в том, что list(r1) не отправляет ничего в генератора. Попробуйте следующее:

def test1(x):
    for i in x:
        _ = yield i
        yield _


r1 = test1([1, 2, 3])

for x in r1:
    print('   x', x)
    print('send', r1.send('hello!'))

Выход:

   x 1
send hello!
   x 2
send hello!
   x 3
send hello!

Вот несколько подготовленный пример, в котором можно было бы отправлять значения в генератор:

def changeable_count(start=0):
    current = start
    while True:
        changed_current = yield current
        if changed_current:
            current = changed_current
        else:
            current += 1

counter = changeable_count(10)

for x in range(20):
    print(next(counter), end=' ')

print()
print()

print('Sending 51, printing return value:', counter.send(51))
print()

for x in range(20):
    print(next(counter), end=' ')

print()
print()

print('Sending 42, NOT printing return value')
print()

counter.send(42)

for x in range(20):
    print(next(counter), end=' ')

print()

Выход:

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 

Sending 51, printing return value: 51

52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 

Sending 42, NOT printing return value

43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

25

css

задан George Stocker 20 March 2009 в 18:08

8 ответов

Большинство ответов верны, когда говорят, что это проблема специфичности, но неверны или неполны в объяснении правил специфичности.

В основном в вашем случае .rightColoumn * «более конкретен», чем td, и поэтому правило побеждает, даже если оно наступает раньше.

Правила CSS 2.1 находятся здесь . Вот эти правила:

считать 1, если декларация от является атрибутом 'style', а не правилом с селектором, 0 в противном случае (= a) (В HTML значения стиля "элемента" «Атрибут - это правила таблицы стилей. Эти правила не имеют селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
подсчитывают количество атрибутов ID в селекторе (= b )
подсчитывают количество других атрибутов и псевдоклассов в селекторе (= c)
подсчитывают количество имен элементов и псевдоэлементов в селекторе (= d)

Конкатенация четырех чисел abcd (в системе счисления с большой базой) дает специфичность.

Таким образом, в вашем случае у вас есть два правила:

.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */

0001 ниже, чем 0010, и поэтому первое правило выигрывает.

Есть два способа исправить это:

Используйте !important, чтобы сделать правило более «важным». Я бы избегал этого, потому что это сбивает с толку, когда у вас много правил, распределенных по нескольким файлам.
Используйте селектор с более высокой специфичностью для тд, который вы хотите изменить. Вы можете добавить к нему имя класса или идентификатор, и это позволит вам заменить правило из связанного файла CSS.

Пример:

<style>
  .rightColomn * { padding: 0; } /* 0010 */
  td#myUnpaddedTable { padding: 10px; } /* 0101 */
  td.anUnpaddedTable { padding: 10px; } /* 0011 */ 
</style>

Редактировать: Исправлены правила специфичности для *. Комментарий Дэвида побудил меня перечитать спецификацию, которая показывает, что селектор * ничего не влияет на оценку специфичности.

41

ответ дан Mr. Shiny and New 安宇 15 October 2019 в 15:20

Самый легкий способ заставить это работать состоит в том, чтобы добавить"! важный" для CSS для гарантии его приоритета (если у Вас нет нескольких! важные правила):

td {
    padding-left: 10px !important;
}

, Если Вы ищете ответ без! важный, необходимо читать в спецификации специфики CSS . Связанный сайт имеет хорошее объяснение того, как он работает, хотя в основном он идет от самого важного до наименьшего, с идентификационными самыми важными селекторами, вторые селекторы класса, и треть селекторов элемента.

4

ответ дан Daniel Lew 15 October 2019 в 15:20

Попробуйте вместо этого:

td.rightColumn * {margin: 0; padding: 0;}

td во внешней таблице стилей более конкретен, поэтому он выигрывает. Если вы квалифицируете класс rightColumn именем элемента, тогда будут применяться стили уровня страницы.

1

ответ дан Andrew Hare 15 October 2019 в 15:20

Вы могли попытаться добавить! важный флаг к Вашему встроенному css.

, например,

троланд {дополняющий-left:10px! важный;}

кроме того, для общих правил упорядочивания правила css, взглянули на это:

http://www.w3.org/TR/CSS2/cascade.html#specificity

1

ответ дан deanWombourne 15 October 2019 в 15:20

Сделайте это:

.rightColumn *,
td.rightColumn * {
  margin: 0;
  padding: 0;
}

Приоритет в CSS выглядит следующим образом:

Если какое-то правило имеет идентификатор, то оно будет предшествовать чему-либо еще.
Если какое-то правило имеет атрибут класса, оно будет предшествовать правилам только для тегов.
Если два правила имеют оба идентификатора или метки, то их число развязывает «бой».

Пример:

<style type="text/css">
  #myid{
    padding: 10px;
  }

  .class{
    padding: 20px;
  }
</style>
<div id="myid" class="class"></div>

Несмотря на то, что у вашего div есть и ID, и класс, правило ID переопределит правило .class.

Чтобы узнать больше о приоритетах правил CSS, я бы порекомендовал http://www.w3.org/TR/CSS2/cascade.html#specificity .

1

ответ дан Seb 15 October 2019 в 15:20

хорошо, я признаю, что я немного опаздываю к игре здесь ... но через 3 года, я думаю, я все еще могу стрелять за это первое место ответа.

дополнительный соус в моем ответе, что есть Пример css с двумя уровнями имени класса.

в приведенном ниже примере вы можете увидеть, что 'td' без класса получает стиль ".interval td", а td с классом "indragover" получает Стиль "table.interval td.indragover" ..

(этот код предназначен для перетаскивания html, поэтому есть некоторый javascript, применяющий класс «indragover» к td в событиях dragenter, dragleave)

// put this in a css file
.interval {
    height: 100%;
    width: 100%;
    background: #FFFFCC;
    border: 2px solid #000000;
    border-collapse: collapse;
}

table.interval tr td {
    border: 2px solid black;
    color:#112ABB;
    background: #FFFFCC;
    height: 20px;
}

table.interval td.indragover {
    background: #AAAA00;
}

// put this in a html file
<table class="interval">
<tr><td>blah</td><td class="indragover">blah</td></tr>
<tr><td class="indragover">blah</td><td>blah</td></tr>
</table>

1

ответ дан dancl 15 October 2019 в 15:20

1.div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}

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

id более специфичен, чем class, который более специфичен, чем элемент.

2.p {font-size: 12px}
p.bio {font-size: 14px}

Вторая строка CSS (p.bio) более конкретна, чем первая, когда речь заходит о вашем абзаце class="bio".

уровень приоритета class выше, чем у элемента p.

-1

ответ дан Paul Roub 15 October 2019 в 15:20

Другие вопросы по тегам:

css

Приоритет CSS

8 ответов

Похожие вопросы: