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

У меня очень странная проблема.Почему `content:" "` отрицание селекторов под ним?

Так у меня есть огромная куча 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: "";. И я действительно смущен, почему возникает такая проблема.

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

источник

2012-04-01 deathlock

В чем смысл 'content:" ";'? Вы действительно используете пустую строку в своем коде? – bhamlin

Это не должно произойти. Можете ли вы предоставить примерную страницу? – user123444555621

@bhamlin: Мне нужно, чтобы создать пузырь речи – deathlock

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

источник

2012-04-04 12:23:23 dwcouch

Пустая строка создает [анонимное поле] (http://www.w3.org/TR/css3-content/#pending-inheritance) в сочетании с отображением: блок переопределяет декларацию width: 0, создавая невидимый слой которые перекрывают другие элементы. Используйте display: inline вместо этого или попробуйте использовать «\ A» в качестве значения и добавьте границу вокруг элемента, чтобы вы могли проверить его размеры. –

-1

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

.spoilermain::after 
{ 
}

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

.spoilermain:after 
{ 
}

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

источник

2013-10-24 16:23:40

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

ответ

Смежные вопросы