css первая буква исключить другие теги

Question

css первая буква исключить другие теги

0

У меня есть страница, созданная WordPress, которая похожа на HTML ниже. Я хотел бы, чтобы первая буква моего div имела другой размер, но когда я пытаюсь добавить стиль для p:first-letter, все p изменяют размеры. Моя проблема в том, что я не могу удалить p -tags, потому что они автоматически создаются.

<div class="div">
    <p>Paragraph 1</p> <!-- I need "P" in "Paragraph" in different size -->
    <p>Paragraph 2</p>
    <blockquote><p>Text blockquote</p></blockquote>
</div>

Какие-либо предложения?

http://jsfiddle.net/hdNDh/

AFetter 19 сен. 2013, в 14:58

Источник

Теги:

html

css

3 ответа

1

Вы можете использовать:

.div > p:first-child::first-letter {
    font-size: 24px;
}

http://jsfiddle.net/hdNDh/2/

Adrift 19 сен. 2013, в 10:55

1

просто спрашиваю .. почему два двоеточия для второго селектора? это просто ты сохранил это или в этом есть какой-то смысл :)
Mr_Green 19 сен. 2013, в 13:08
1

@Mr_Green: извлечено отсюда . С введением CSS3, чтобы провести различие между псевдоклассами и псевдоэлементами (да, они разные), в CSS3 все псевдоэлементы должны использовать синтаксис с двойным двоеточием, а все псевдоклассы должны использовать синтаксис с одиночной двоеточием
Harry 19 сен. 2013, в 13:13

1

Вам нужна комбинация селекторов:

http://jsfiddle.net/hdNDh/5/

.div > p:first-child:first-letter {
    font-size:40px;
}

isherwood 19 сен. 2013, в 10:36

Ещё вопросы

просто спрашиваю .. почему два двоеточия для второго селектора? это просто ты сохранил это или в этом есть какой-то смысл :)
@Mr_Green: извлечено отсюда . С введением CSS3, чтобы провести различие между псевдоклассами и псевдоэлементами (да, они разные), в CSS3 все псевдоэлементы должны использовать синтаксис с двойным двоеточием, а все псевдоклассы должны использовать синтаксис с одиночной двоеточием

Mathijs Flietstra · Accepted Answer · 2013-09-19T11-17-00.000Z

Используйте селектор дочерних элементов CSS >.

E> F - соответствует любому элементу F, который является дочерним элементом элемента E.

jsFiddle

.div > p:first-letter {
    font-size:40px;
}

Edit: Кажется, я сначала неправильно понял ваш вопрос, если вам нужна первая буква только для div, просто установите псевдокласс на div вместо p.

jsFiddle

.div:first-letter {
    font-size:40px;
}

Edit2: Как уже упоминалось в комментариях ниже, для этого для работы в FF вам необходимо:

.div > p:first-child:first-letter {
    font-size:40px;
}

jsFiddle

Это кажется странным/странным поведением, поэтому я немного осмотрелся, и кажется, что Firefox более определенно относится к псевдоклассу :first-letter чем к другим браузерам. Одним из примеров является то, что не означает, что специальные символы являются буквами, и поэтому не будут применять к ним стили.

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

милая летающая сестра, это также помогает мне
@Isherwood - Ах, кажется, я неправильно понял :) это исправит.
Спасибо. Я просто добавляю другой селектор p: first-child: first-letter, чтобы изменить только первое <p>
@Coelho, двойной псевдокласс не нужен, смотрите мой обновленный ответ.
хороший ... просто учтите, что если вы используете пробел перед селектором, как это: .div :first-letter то это применяется ко всем дочерним элементам.
@MathijsFlietstra: Ваш второй пример не работает в FF 23
@Adrift - Правда, похоже, вам нужно .div > p:first-child:first-letter чтобы это работало в FF, отредактирует его в ответ.