Как использовать тег <nav>на нескольких страницах - PullRequest
Новая
       1

Как использовать тег <nav>на нескольких страницах

0 голосов
/ 01 января 2019

Я использую метку навигации на странице индекса, а также хочу использовать ее на второй странице, но я хочу оставить только один и тот же файл CSS.Теперь проблема в том, что если я изменю стиль .nav в css-файле для второй страницы, то он будет изменен на индексной странице.Должен ли я создавать отдельные CSS-файлы для каждой страницы или есть какое-либо иное решение?

Я пытался присвоить идентификатор nav на второй html-странице, чтобы он отличался в файле css, но он не вносит изменений внавигация второй страницы.

один два три

Это должно быть изменено на второй странице.

Ответы [ 3 ]

0 голосов
/ 01 января 2019

Я рекомендую, если вы хотите продолжить работу с тем же CSS-файлом, вы можете добавить свойство id к каждой панели навигации и использовать id для присвоения им определенных атрибутов CSS.

0 голосов
/ 01 января 2019

Люди, работающие с WordPress тем же требованием, что и вы.Их решение заключается в добавлении тега id к элементу body.

Их CSS-правила выглядят примерно так ... 

#page1 .nav {
 ...  your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}

HTML 

<body id="page1">

<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>

Rule [# page1 .page1] действует только тогда, когда .page1 является элементом and в # page1, что происходит только на странице page1.Поэтому я могу выделить пункт меню, который соответствует загруженной странице.

0 голосов
/ 01 января 2019

Вы можете добавить класс к своему элементу и ссылаться на этот конкретный класс.Например: 

<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>


.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }

Надеюсь, что помогло!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...