7

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

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

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

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

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

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

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

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

    от
  • Можно утверждать, что все нравится, но нет, класс не элемент. Как в вашем примере,some не элемент, только таблица сclass="some" является. Даже если вы измените имя класса, чтобы оно звучало как элемент,class="theThirdTable"это все еще не элемент!

    от
  • Ну, можно утверждать, что первенец - это элемент ...

    от DanMan
  • Это верно, да, псевдокласс подобен классу (в данном случае, имени класса, который будет назначен всем первым элементам), в то время как псевдоэлемент является новым элементом в DOM, в данном случае тем, который будет вставлять перед рассматриваемым элементом. Имеет ли это смысл?

    от
  • !important это последнее средство, которое нужно использовать, если ничего не помогает.

    от
  • УвидетьWhat is the difference between a pseudo-class and a pseudo-element in CSS?

    от
  • @ DanMan, упс, я подсчитал конкретику и ты прав, обновил ответ.

    от
  • Дело в том, что он всегда использует первый, а не второй.

    от DanMan
  • @JohnH: проблема в том, что это «другое» будет отличаться, и запасное правило, как предполагается, вступит во владение, если для определенного класса нет явного правила.

    от DanMan
  • Первый имеетmore specificity чем другой.

    от Jared Farrish
  • @JaredFarrish: почему? у второго есть два селектора класса, первый только один. Разве это не должно использовать это вместо этого, если это соответствует?

    от DanMan
  • Первый, кажется, 31 (три селектора второго уровня плюс селектор элемента), второй 30 (три селектора второго уровня, без селектора элемента). Посмотри какcalculate your selector specificity.

    от Jared Farrish
  • Будет.some td.other:before не работа?

    от John H
  • 2

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

    !important ко второму правилу и посмотрите, работает ли это.

  • 14

    Хорошо, чтобы исправить это, после

    немного чтениеэто специфика:

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

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

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

  • 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, чтобы переопределить стиль первое правило.