Комбинирование селекторов, наследование CSS
Primary tabs
Forums:
Есть CSS код, надо написать соответствующий ему HTML, чтобы всё работало
#my p.announce, .tt.pm li li a:hover+span { color: #f00; }
Следующий код написан мной, не получается применить второй селектор .tt.pm li li a:hover+span. Подскажите, что исправить, пожалуйста.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Хелоу ворлд:)</title> <style> a:hover { color : aqua; } #my p.announce, .tt.pm li li a:hover+span { color: #f00; } </style> </head> <body> <h1>Привет! Здесь мы познакомимся с JQuery</h1> <article id="my"> <h4>JQuery - это библиотека (framework) JavaScript, обеспечивающая интерактивную работу страницы.</h4> <p class = "announce">Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.</p> </article> <article> <h4 class="tt">Возможности JQuery</h4> <ul class="pm"> <li>Движок кросс-браузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;</li> <li>Переход по дереву DOM, включая поддержку XPath как плагина;</li> <li>События;</li> <li>Визуальные эффекты;</li> <li>AJAX-дополнения;</li> <li>JavaScript-плагины;</li> <li>Дополнительные возможности: <ul> <li>Писать смешные книжки про JQuery</li> <li>а тут внезапно можно узнать о <a href="Smth_more.jpg">смысле жизни. </a><span>Опасно! Не рекомендуется переходить по ссылке лицам с неустойчивой психикой.</span></li> </ul> </li> </ul> </article> <footer> <h4>Источники</h4> <p>Материал из Википедии — свободной энциклопедии https://ru.wikipedia.org/wiki/JQuery<br> "JQuery для начинающих". А.Шевчук</p> </footer> </body> </html>
- Log in to post comments
- 5180 reads
vedro-compota
Mon, 06/05/2017 - 14:35
Permalink
Иерархия против одновременности
В принципе у вас всё верно, но вы видимо неправильно трактовали селектор:
-- он означает не классы на иерархии элементов, а просто два класса одновременно стоящие на одном из элементов.
То есть чтобы применить второй селектор надо было, например вот это:
Заменить на:
Поэксперементируйте -- вы по-идее можете добавить этот спаренный класс в любой вышележащий родительский (относительно ссылки, с идущим после неё спаном) элемент - и эффект будет тем же.
_____________
матфак вгу и остальная классика =)
vedro-compota
Mon, 06/05/2017 - 14:41
Permalink
Расшифровка селектора
то есть тут
написано -- выбери ка мне все элементы:
_____________
матфак вгу и остальная классика =)