Добавьте третий элемент в div, содержащий: after и: before [duplicate]

Один общий подход, о котором я не упоминал здесь, заключается в том, чтобы запустить HTML через Tidy , который может быть настроен на выдачу гарантированного действительного XHTML. Затем вы можете использовать любую старую библиотеку XML.

Но к вашей конкретной проблеме вы должны взглянуть на этот проект: http://fivefilters.org/content-only/ - это модифицированная версия алгоритма Readability , который предназначен для извлечения только текстового содержимого (а не верхних и нижних колонтитулов) со страницы.

79
задан BoltClock 13 December 2015 в 06:09
поделиться

2 ответа

В CSS2.1 элемент может содержать только не более одного псевдоэлемента любого типа в любой момент. (Это означает, что элемент может иметь как псевдо-элемент :before, так и :after - он просто не может иметь более одного типа.)

В результате, когда у вас несколько :before, которые соответствуют одному и тому же элементу, все они будут каскадироваться и применяться к одному псевдоэлементу :before, как и к нормальному элементу. В вашем примере конечный результат выглядит следующим образом:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Как вы можете видеть, вступает в силу только объявление content с наивысшим приоритетом (как упоминалось выше) остальные объявления отбрасываются, как в случае с любым другим свойством CSS.

Это поведение описано в разделе селекторов в CSS2.1 :

< blockquote>

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

Это означает, что селекторы с псевдоэлементами работают точно так же, как селекторы для обычных элементов. Это также означает, что каскад должен работать одинаково. Как ни странно, CSS2.1, по-видимому, является единственной ссылкой; ни css3-selectors , ни css3-каскад не упоминают об этом вообще, и еще предстоит выяснить, будет ли оно разъяснено в будущей спецификации.

Если элемент может соответствовать более чем одному селектору с тем же псевдоэлементом, и вы хотите, чтобы все они каким-то образом применились, вам нужно будет создать дополнительные правила CSS с комбинированными селекторами, чтобы вы могли точно указать, что браузер должен делать в тех случаев. Я не могу представить полный пример, включая свойство content здесь, так как не ясно, должен ли сначала быть символ или текст. Но селектор, который вам нужен для этого комбинированного правила, является либо .circle.now:before, либо .now.circle:before - какой бы селектор вы ни выбрали, является личным предпочтением, так как оба селектора эквивалентны, это только значение свойства content, которое вам нужно будет определить самостоятельно.

Если вам все еще нужен конкретный пример, см. мой ответ на этот аналогичный вопрос .

Унаследованная спецификация содержимого css3 содержит раздел о вставка нескольких ::before и ::after псевдоэлементов с использованием нотации, совместимой с каскадом CSS2.1, но обратите внимание, что этот конкретный документ устарел - он не обновлялся с 2003 года, и никто не имеет реализовала эту функцию в последнее десятилетие. Хорошей новостью является то, что заброшенный документ активно переписывается под видом css-content-3 и css-pseudo-4 . Плохая новость заключается в том, что множественная функция псевдоэлементов нигде не может быть найдена ни в одной спецификации, по-видимому, опять-таки, из-за отсутствия интереса к исполнителям.

72
ответ дан Community 26 August 2018 в 00:30
поделиться

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

Поместите свой основной элемент относительно (или абсолютный / фиксированный) и используйте оба: до и: после позиции абсолютного ( в моей ситуации он должен был быть абсолютным, не знаю о вашем).

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

Этот элемент начнет действовать, так как его владелец является вашим основным элементом.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}
18
ответ дан HydraOrc 26 August 2018 в 00:30
поделиться