2017-02-01 2 views
1

Просто играя с HTML/CSS и задаюсь вопросом, как браузер обрабатывает фрагменты текста, которые не заключены в тег. Когда я запускаю приведенный ниже код, все три текстовых фрагмента (в <head>, между <head> и <body>, а также в <body>) подняли красный стиль «тела».Каковы правила выбора текстовых узлов HTML в CSS?

Почему текстовые строки за пределами <body> забрать правило «тела»?

HTML

<html> 
    <head> 
    <title>Test web page</title> 
    head text outside a tag 
    </head> 
    Text node between head and body 
    <body> 
    <h1>Header</h1> 
    <p> 
     Some paragraph text 
    </p> 
    some body text outside a tag 
    </body> 
</html> 

CSS

body { 
    color:red; 
} 

h1, p { 
    color:lightblue; 
} 

head { 
    color: yellow; 
} 
+6

Поскольку ваш HTML недействителен, и браузер просто пытается понять это. Каждый нормальный текст должен находиться в 'body'. – str

ответ

1

Ваша проблема на самом деле не CSS связанных; CSS только делает проблему видна.

Когда браузер анализирует HTML, он следует ряду правил.

  1. Голова не может содержать простой текст; корпус может
  2. Некоторые стартовые и конечные метки являются необязательными
  3. Если есть ошибка; попытайтесь обойти его

Итак, если парсер встречает какой-то простой текст в голове, он знает, что текст там не принадлежит. Сначала он вставляет невидимый конечный тег </head>, за которым следует невидимый начальный тег <body>, а затем успешно продолжает синтаксический анализ.
И это даже не обработка ошибок на работе, это то, как работают обычные правила синтаксического разбора!

Процедуры обработки ошибок вступают в действие только тогда, когда синтаксический анализатор встречает тег </head>, который не допускается в теле. Затем он игнорирует этот тег и продолжает. То же самое с тегом <body>, который также не разрешен в теле.
Итак, это то, что он делает, и почему вы получаете эти результаты.

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