Маленькая хитрость с первой буквой

Автор：Eve Cole Время обновления：2010-03-19 16:24:49

Когда OL определяет упорядоченный список, если не указано list-style-position:inside, текст и ведущие символы имеют отступ.

Но иногда типы списков, определенные OL, имеют ограничения. Например, невозможно определить китайские иероглифы «один, два и три». Нам приходится вводить эти символы вручную, но на этот раз текст и символы связаны друг с другом.

[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]

В это время вы можете использовать псевдокласс первой буквы:

Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>первая буква</title>
<style type="text/css">
тело {размер шрифта: 12 пикселей; ширина: 600 пикселей; поле: 2em авто;}
ol.list {стиль списка: нет }
ol.list li:first-letter {margin-left:-2em;color:blue;font-weight:bold;}
</стиль>
</голова>
<тело>
<ол>
<li>Первоначально известная как Box Model Acid Test, это веб-страница, используемая для тестирования браузеров. Разработанный в октябре 1998 года, он стал важным эталоном совместимости с ранними браузерами, особенно с поддержкой браузерами каскадных таблиц стилей 1.0. Подобно использованию кислотного теста для быстрого и визуального измерения качества куска металла, цель веб-кислотного теста — предоставить способ четко указать, соответствует ли браузер веб-стандартам. </li>
<li>Эта версия разработана проектом веб-стандартов для всестороннего тестирования поддержки стандартов HTML, CSS 2.0 и изображений PNG[1]. </li>
<li>Официально выпущенный 3 марта 2008 г., его тестирование сосредоточено на ECMAScript, DOM Level 3, медиа-запросах и данных: URL[3]. После открытия этой тестовой веб-страницы в браузере страница будет постоянно загружать функции [4] и выставлять оценки в зависимости от тестовой ситуации, полная оценка равна 100.</li>
</ол>
<час />
<ол класс="список">
<li>1. Первоначально известная как «кислотный тест коробочной модели», это веб-страница, используемая для тестирования браузеров. Разработанный в октябре 1998 года, он стал важным эталоном совместимости с ранними браузерами, особенно с поддержкой браузерами каскадных таблиц стилей 1.0. Подобно использованию кислотного теста для быстрого и визуального измерения качества куска металла, цель веб-кислотного теста — предоставить способ четко указать, соответствует ли браузер веб-стандартам. </li>
<li>2. Эта версия разработана Проектом веб-стандартов для всестороннего тестирования поддержки стандартов HTML, CSS 2.0 и изображений PNG [1]. </li>
<li>3. Официально выпущенный 3 марта 2008 г., основное внимание в его тестировании уделяется ECMAScript, DOM Level 3, медиа-запросам и данным: URL[3]. После открытия этой тестовой веб-страницы в браузере страница будет постоянно загружать функции [4] и выставлять оценки в зависимости от тестовой ситуации, полная оценка равна 100.</li>
</ол>
<час />
<ол класс="список">
<li>1. Первоначально известная как «кислотный тест коробочной модели», это веб-страница, используемая для тестирования браузеров. Разработанный в октябре 1998 года, он стал важным эталоном совместимости с ранними браузерами, особенно с поддержкой браузерами каскадных таблиц стилей 1.0. Подобно использованию кислотного теста для быстрого и визуального измерения качества куска металла, цель веб-кислотного теста — предоставить способ четко указать, соответствует ли браузер веб-стандартам. </li>
<li>2. Эта версия разработана Проектом веб-стандартов для всестороннего тестирования поддержки стандартов HTML, CSS 2.0 и изображений PNG [1]. </li>
<li>3. Официально выпущенный 3 марта 2008 г., основное внимание в его тестировании уделяется ECMAScript, DOM Level 3, медиа-запросам и данным: URL[3]. После открытия этой тестовой веб-страницы в браузере страница будет постоянно загружать функции [4] и выставлять оценки в зависимости от тестовой ситуации, полная оценка равна 100.</li>
</ол>
</тело>
</html>

[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]

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

Кроме того, каждый браузер по-разному обрабатывает символы рядом с ведущим символом. Поскольку Safari не установлен, я не проверял его:

Код:

Результат рендеринга:

IE8, FF3 и Opera ведут себя одинаково. Chrome обрабатывает только символы слева, а IE6 и 7 — только первый символ.