Lincoln
( off
)
(
14:29 10-04-2015
)
Изучаю CSS, столкнулся с интересной неувязочкой и пока решил завести тему здесь.
Всем понятно, что имел в виду под "внутренний"?
Цитата: Internal CSS
<head>...<style>blah-blah-blah</style>...</head>
Тема не глобальная, а о применении селекторов и их комбинаций, а также комбинировании селекторов элементов с комбинаторами, псевдоклассами и псевдоэлементами. Возможно также обсуждение допустимых свойств для различных селекторов и их комбинаций.
Проблему опишу в следующем своём посте, если тему не закроют...
Lincoln
( off
)
(
16:55 10-04-2015
)
Короче, я попытался поменять цвет шрифта самого верхнего заголовка, который является первым и непосредственным "ребёнком" body.
Структура такая:
<body>
<h1>...</h1>
....тут некоторое меню...
...
<section>
<h1>...</h1>
...
</section>
и ещё с десяток аналогичных секций, и больше заголовков никаких нет, конец фильма: </body>
Мне нужно было поменять цвет самого первого h1, и я вспомнил про комбинаторы и псевдоклассы - а именно :first-child и :first-of-type.
Не, в результате псевдоклассы не понадобились, но в процессе выяснилось, что при всех равных определитель h1:first-child НУ НИКАК ВООБЩЕ не работал в отношении этого заголовка - тогда как :first-of-type работал замечательно и при любых комбинациях.
Пробовал разные комбинаторы примерно в таком селекторе:
Цитата: my-style-test
body h1:first-child
body h1:first-of-type
body > h1:first-child
body > h1:first-of-type
В результате я обошёлся вообще без псевдоклассов, но фишка в том, что с :first-child нужная h1 не красилась НУ НИКАК, в то время как в 1 и 2 остальные показанные мной на схеме h1 как раз КРАСИЛИСЬ - НО не та, первая (а ведь она FIRST CHILD!). Да, и :first-of-type работал всегда.
Lincoln
( off
)
(
17:42 10-04-2015
)
Странное дело: только что проверил вот здесь - оно работает, а в моём доке - нет.
Цитата: W3Schools' 'Try it'
...
<head>
<style>
body h1:first-child {color: yellow}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This paragraph is the first child of its parent (body).</p>
...blah-blah-blah...(не менял)...
<div>
<h1>Another heading (div).</h1>
<p>This paragraph is not the first child of its parent.</p>
</div>
...</body>...
Может, у меня чё-то другое в "голове" не так?
Цитата: начало моего дока
<!DOCTYPE html>
<html lang="en">
<head>
<a id="Top"><title>Introduction to HTML</title></a>
<meta charset="UTF-8">
(Дальше <style> уже...)
Lincoln
( off
)
(
17:49 10-04-2015
)
Цитата: Lincoln
Странное дело: только что проверил вот здесь - оно работает, а в моём доке - нет...
Может, у меня чё-то другое в "голове" не так?
Точно!
Ща вставил "<html lang="en">
<head>
<a id="Top"><title>Introduction to HTML</title></a>
<meta charset="UTF-8">" туда - и верхний заголовок уже цвет не меняет!
Чё за нах! кто знает?
Прикрепленный файл .gif:
скачать
(11Kb)
Lincoln
( off
)
(
17:58 10-04-2015
)
Кажется, нашёл непосредственного виновника - "<a id="Top"><title>Introduction to HTML</title></a>": возможно, браузер считает это первым элементом тела... .vopr.
Щас попробую потерять a-таги и воткнуть id в title... Ага! работает!.ok.
Всем спасибо за помощь!:-D
Lincoln
( off
)
(
18:07 10-04-2015
)
Цитата: Lincoln
...
Щас попробую потерять a-таги и воткнуть id в title... Ага! работает!.ok....
Awww...
Теперь якорь Back to Top не работает...
Как вы делаете Back to top, ребята?.vopr.
Lincoln
( off
)
(
18:40 10-04-2015
)
Цитата: Lincoln
Awww...
Теперь якорь Back to Top не работает...
Как вы делаете Back to top, ребята?.vopr.
Нашёл, как сделать!
Воткнул этот id в открывающий body.ok.
Ещё раз всем спасибо за помощь! ;)
гимес
( off
)
(
01:19 11-09-2015
)
Вот так и бывает- сам заморочился и сам же разморочился. А ход действий мне понравился.
гимес
( off
)
(
01:23 11-09-2015
)
А что такое "якорь Back to Top"? Кнопка "Наверх", что ли?
Lincoln
( off
)
(
13:07 11-09-2015
)
гимес, tag a расшифровывается как anchor - в переводе "якорь".
"Якорь" в более узком смысле я употребил в привязке к внутристраничным ссылкам - необязательно "Наверх", это может быть как ссыла на секции статьи в Вики.:)
)