2016-01-04 2 views
1

Это выдержка из файла style.css в теме WordPress Двадцать шестнадцать. У меня есть эта часть кода, которая создает черную полосу вверху и внизу страницы.Поймите какую-нибудь wp тему css code

body:not(.custom-background-image):before, 
body:not(.custom-background-image):after { 
    background: inherit; 
    content: ""; 
    display: block; 
    height: 21px; 
    left: 0; 
    position: fixed; 
    width: 100%; 
    z-index: 99; 
} 

Я утверждаю это потому что я понимаю, что изменение высоты к 0px я позволяю полосы исчезнуть. Но как эти инструкции работают для создания двух полосок? Я знаю, что это также целая работа CSS, но я думаю, что эти инструкции делают большую часть работы.

Предварительный просмотр темы здесь: https://wordpress.org/themes/twentysixteen/.

Весь style.css файл здесь: https://github.com/WordPress/twentysixteen/blob/master/style.css#L18-L51

Кто может помочь мне очистить вещи?

ответ

0

:before и :after являются псевдоселекторами. С этим вы можете спроектировать, что происходит до/после элемента.

Background: inherit; наследует фон от элемента кузова.

Обратите внимание, что есть также margin: 21px на .page

+0

Мой пункт, чтобы понять, откуда берутся две полосы берутся. Я знаю о до и после утверждения, и я видел, что маржа установлена ​​на .page-класс. Полоски также отображаются, если я устанавливаю этот маржировочный код на 0px. Туман все еще существует о том, почему эти инструкции создают две полосы. –

+0

Ну, полосы от этого. До и после имеют высоту 21px. И иметь темный цвет bg. – yeouuu

+0

Почему у меня две полосы, и не только одна? Почему они прикреплены к верхней и нижней части страницы в симметричном положении? Я вижу «left: 0», и я полагаю, что это установило полосу в левом положении, но где установлена ​​позиция «top: 0» (или симметричная для нижней)? Мне нужен ответ на эти вопросы ... –

Смежные вопросы