Почему `content:" "отрицает селекторы под ним? - PullRequest
Новая
       7

Почему `content:" "отрицает селекторы под ним?

2 голосов
/ 02 апреля 2012

У меня очень странная проблема.

Итак, у меня есть огромная куча CSS, и среди многих селекторов в ней есть селектор, который выглядит следующим образом, который прекрасно работает: 

.spoilertop, #QUOTETOP, #CODETOP, .utubetop {
    padding-left: 44px;
    font-size:12px;
}

Но затем я добавляю селектор, который выглядит вот так: 

.spoilermain:after, #QUOTE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #766161;
    border-style: solid;
    display: block;
    width: 0;
}​

И тогда spoilertop, #QUOTETOP, #CODETOP, .utubetop { } перестает работать. Это не дает мне визуальный эффект, который он должен был дать.

Я снова проверил это с другим селектором. У меня есть селектор, который выглядит так: 

#recaptcha {
    background:#766161!important;
    font-size:11px;
}

Затем я добавляю это выше: 

.utubemain:after, #CODE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #c08f84;
    border-style: solid;
    display: block;
    width: 0;
}​

Опять #recaptcha { } перестает работать.

Я пытался удалить свойства одно за другим, и я обнаружил, что content: ""; - это то, что вызывает проблемы. На данный момент решение заключается в размещении случайного неиспользуемого селектора ниже { content: ""; }. Так, например, это будет выглядеть так: 

.spoilermain:after, #QUOTE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #766161;
    border-style: solid;
    display: block;
    width: 0;
}​

.some-line {
    border:#000;
    background:#200;
}

.spoilertop, #QUOTETOP, #CODETOP, .utubetop {
    padding-left: 44px;
    font-size:12px;
}

Но это решение немного хлопотно, если у меня много content: "";. И я действительно смущен, почему происходит такая проблема.

Итак ... кто-нибудь может мне помочь объяснить, почему?

Ответы [ 2 ]

0 голосов
/ 24 октября 2013

до и после являются псевдоэлементами, но не псевдоклассами.Таким образом, они должны использоваться следующим образом: 

.spoilermain::after 
{
}

, но НЕ так, как вы сделали 

.spoilermain:after 
{
}

Некоторые браузеры довольно терпимы в этом, но в строгом режиме должны вызвать ошибку.

0 голосов
/ 04 апреля 2012

Это нарушает правило избыточности, однако вы пробовали отдельные объявления для .spoilermain: after и #QUOTE: after?

...