Согласно нашему пониманию приоритета CSS, последний определенный стиль CSS переопределит все существующие или конфликтующие стили, определенные до него, как показано в следующем примере:
| Ниже приводится цитируемое содержание: Пример исходного кода: р {цвет: красный фон: желтый} |
Приведенный выше абзац в конечном итоге появится зеленым шрифтом с желтым фоном. Это связано с тем, что последний определенный цвет: зеленый перезаписывает ранее определенный красный. Что касается того, почему желтый фон не исчезает, то это из-за второго пункта. противоречивое определение в определении, поэтому оно все еще действительно.
Давайте посмотрим эффект от бега:
| Ниже приводится цитируемое содержание: Исходный код для запуска: <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { цвет: красный; фон: желтый }p { цвет: зеленый </style></head><body><p>admin5</p></body></ html> <p class="красный зеленый синий">www.admin5.com</p> <p class="зеленый синий красный">admin5</p> <p class="синий красный зеленый">www.admin5.com</p> |
Может быть, вы думаете, что уже поняли. Вы действительно понимаете? Хорошо, давайте проведем небольшой тест.
| Ниже приводится цитируемое содержание: Пример исходного кода: .red { цвет: красный } .green { цвет: зеленый } .blue { цвет: синий } ... <p class="красный зеленый синий">admin5</p> <p class="green blue red">Рай обучения для веб-мастеров</p> <p class="синий красный зеленый">www.admin5.com</p> |
Скажите пожалуйста, какого цвета будет отображаться текст в трёх абзацах выше, когда он наконец отобразится?
Пожалуйста, не спешите запускать следующий код. Подумайте, какого он будет цвета?
Ладно, об этом вы уже подумали, посмотрим эффект от эксплуатации:
| Ниже приводится цитируемое содержание: Исходный код для запуска: <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { цвет: красный }.green { цвет: зеленый }.blue { цвет: синий </style></head><body><p class=" красный зеленый синий">admin5</p><p class="green blue red">Рай обучения для веб-мастеров</p><p class="blue red green">www.admin5.com</p></body > </html> |
Ответ в том, что все они отображаются синим цветом, то есть синим. Хотя к каждому абзацу применяются три стиля абзаца в разном порядке, похоже, что цвет должен определяться в соответствии с порядком применения стилей. Например. , первый отображается синим, а первый — синим. Второй — красным, а третий — зеленым. На самом деле, это не имеет никакого отношения к порядку. в котором применяются стили. Все они в конечном итоге подчиняются последнему указанному стилю и имеют синий цвет! Пожалуйста, не волнуйтесь, если вы столкнетесь с подобными проблемами в будущем, потому что приведенный выше эксперимент уже дал вам ответ.