Комбинирование селекторов, наследование CSS

Primary tabs

melisa's picture
Submitted by melisa on Mon, 06/05/2017 - 14:06

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>

Key Words for FKN + antitotal forum (CS VSU):

  • Log in to post comments
  • 5540 reads
vedro-compota's picture

vedro-compota

Mon, 06/05/2017 - 14:35

В принципе у вас всё верно, но вы видимо неправильно трактовали селектор:

.tt.pm

-- он означает не классы на иерархии элементов, а просто два класса одновременно стоящие на одном из элементов.

То есть чтобы применить второй селектор надо было, например вот это:

<h4 class="tt">Возможности JQuery</h4>
<ul class="pm">

Заменить на:

<h4 class="tt">Возможности JQuery</h4>
<ul class="tt pm">

Поэксперементируйте -- вы по-идее можете добавить этот спаренный класс в любой вышележащий родительский (относительно ссылки, с идущим после неё спаном) элемент - и эффект будет тем же.

_____________
матфак вгу и остальная классика =)

vedro-compota's picture

vedro-compota

Mon, 06/05/2017 - 14:41

то есть тут

.tt.pm li li a:hover+span

написано -- выбери ка мне все элементы:

  • которые представлены тэгом спан,
  • которые идут после ссылки на которую навели мышь,
  • которая (ссылка) лежит в ЛИ (не обязательно непосредственно) ,
  • а тот ЛИ лежит в другом ЛИ (не обязательно непосредственно),
  • а тот другой ли, опять же, не обязательно непосредственно лежит в каком-то элементе у которого есть два класса tt и pm

_____________
матфак вгу и остальная классика =)