Вопрос по css – Почему я не могу переопределить существующие псевдоэлементы?

7

У меня есть два правила CSS, следующие друг за другом:

<code>.some td:first-child:before {
    content:url('path/to/image.png')" " ;
}
.some .other:before {
    content:url('path/to/image2.png')" " ;
}
</code>

Вот фрагмент кода HTML:

<code><table class="some">
<tr>
    <td class="other">Text goes here</td>
    <td>Some more text.</td>
</tr>
</table>
</code>

Они оба должны быть применены к одной и той же ячейке таблицы. Тот, у кого нет класса, считается запасным вариантом. Но по какой-то причине он всегда выбирает первое правило, а не второе. Я знаю, что второй работает, так как он будет использоваться, если я отключу первый в Firebug.

Что мне здесь не хватает?

Первый имеетmore specificity чем другой. Jared Farrish
@JohnH: проблема в том, что это «другое» будет отличаться, и запасное правило, как предполагается, вступит во владение, если для определенного класса нет явного правила. DanMan
Первый, кажется, 31 (три селектора второго уровня плюс селектор элемента), второй 30 (три селектора второго уровня, без селектора элемента). Посмотри какcalculate your selector specificity. Jared Farrish
Будет.some td.other:before не работа? John H
@JaredFarrish: почему? у второго есть два селектора класса, первый только один. Разве это не должно использовать это вместо этого, если это соответствует? DanMan

Ваш Ответ

3   ответа
2

Я уверен, что это связано со спецификой. Попробуйте добавить!important ко второму правилу и посмотрите, работает ли это.

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

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

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

+--------------------+--------------------+-----------------------------------+
|    Type            |   Specific Value   |  Example                          |
+--------------------+--------------------+-----------------------------------+
|  Inline Style      |   1000             | style="color: #f00;"              |
+--------------------+--------------------+-----------------------------------+
|  Id                |   100              | #text { color: #f00; }            |
+--------------------+--------------------+-----------------------------------+
|  Classes           |   10               | .text { color: #f00; }            |
+--------------------+--------------------+-----------------------------------+
|  Pseudo Classes    |   10               | a:hover { color: #f00; }          |
+--------------------+--------------------+-----------------------------------+
|  Pseudo Elements   |   10               | a:first-child { color: #f00; }    |
+--------------------+--------------------+-----------------------------------+
|  Elements (tag)    |   1                | a { color: #f00; }                |
+--------------------+--------------------+-----------------------------------+

По сути, селекторы классов более специфичны, чем селекторы тегов. Давайте посчитаем вашу специфику

  • For first rule: 31
  • For second rule: 30

ТАК первое правило побеждает.

Вы можете увеличить специфичность второго правила, как

.some tr td.other:before {
    content:url('path/to/image2.png') ;
}

Его рассчитать до 33, чтобы переопределить стиль первое правило.

Дело в том, что он всегда использует первый, а не второй. DanMan
@ DanMan, упс, я подсчитал конкретику и ты прав, обновил ответ.
14

Хорошо, чтобы исправить это, посленемного чтениеэто специфика:

  • Id: 100
  • classes: 10
  • pseudo-classes: 10
  • pseudo-elements: 1
  • elements: 1

Таким образом, первый селектор имеет специфику 22, а второй - только 21. Видимоfirst-child кажется псевдоклассом, а не псевдоэлементом.

Наконец, добавивtd до.other делает трюк, с тех пор порядок документов имеет приоритет.

Ну, можно утверждать, что первенец - это элемент ... DanMan
Это верно, да, псевдокласс подобен классу (в данном случае, имени класса, который будет назначен всем первым элементам), в то время как псевдоэлемент является новым элементом в DOM, в данном случае тем, который будет вставлять перед рассматриваемым элементом. Имеет ли это смысл?
Можно утверждать, что все нравится, но нет, класс не элемент. Как в вашем примере,some не элемент, только таблица сclass="some" является. Даже если вы измените имя класса, чтобы оно звучало как элемент,class="theThirdTable"это все еще не элемент!

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