: селектор первой буквы не работает для ссылки

#css #pseudo-element

#css #псевдоэлемент

Вопрос:

Селектор :first-letter псевдоэлементов отлично работает для <p> элемента, но не для ссылок. Это, например, не имеет никакого эффекта:

 a:first-letter
{
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

Почему? Как я могу изменить стиль первой буквы для <a> элемента

Ответ №1:

Согласно спецификации W3, :first-letter псевдоэлемент работает только для блочного элемента, а a это не так.

Как ни странно, *:first-letter это привело к преобразованию первой буквы в Chrome 14 и Firefox 3.6.23. Скрипка: http://jsfiddle.net/8W7FF/3 /

1. Ваша демонстрация jsfiddle «работает», потому что первая буква O — это не только :first-letter of <a> , но и :first-letter of <body> . Тем не менее, 1, ваш ответ выглядит правильным.

2. Я бы предположил, что это потому, что * будет включать body тег, который jsFiddle помещает туда автоматически.

3. @JonathanNewmuis, чтобы быть более точным, необязательно указывать, что входит <body> в документ; в HTML <body> есть необязательные как открывающие, так и закрывающие теги. У каждого HTML-документа есть свой body , независимо от того, добавляете ли вы его явно в разметку или нет.

4. @duri Правильно. Извините, если это могло быть неоднозначным. Скорее, я пытался сказать, что jsFiddle обслуживает содержимое, имеющее тег body, а не то, что тег body должен быть явно помечен, как это сделал jsFiddle.

5. @RobW Вы только что доказали, что это действительно из — за body . Селектор body * соответствует «любому элементу внутри body » == a элементу. Поскольку :first-letter это не работает со встроенными элементами, буква не пишется с заглавной буквы. Попробуйте использовать body:first-letter , и вы увидите, что буква пишется с заглавной буквы, потому что это первая буква body , даже если это первая буква другого элемента ( a в данном случае).

Ответ №2:

Проверьте спецификацию. На данный момент inline элементы не поддерживаются ::first-letter :

В CSS ::first-letter псевдоэлемент применяется к блочным контейнерам, таким как block , list-item , table-cell , table-caption , и inline-block элементам.
Примечание: будущая версия этой спецификации может разрешить применять этот псевдоэлемент к большему количеству типов отображения.
https://www.w3.org/TR/selectors-3/#application-in-css

Таким образом, если вы попытаетесь стилизовать ::first-letter что-то, что не является «блочным контейнером», например, встроенным элементом, это не сработает. Это относится не только к ссылкам; вы также обнаружите, что по умолчанию вы также не можете стилизовать ::first-letter of a span , как показано ниже:

 div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

 <div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>

Возможное решение этой проблемы — превратить элемент в блочный контейнер, например, установив для него значение display: block или display: inline-block . Ниже приведен пример использования первого для span , а второго для a :

 div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}
span {
    display: block;
}
a {
    display: inline-block;
}

 <div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>