Проблемы с мобильным CSS-кодом

Question

Я пытаюсь сделать мобильную версию своего сайта.Вот код для «баннера»:

<center>
    <div id="banner">
        <a href="./"><img src="graphics/banner.png" /></a>
    </div>
</center>

И с использованием этого CSS:

#banner img a {
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}

Когда я пытаюсь это так, это не будет работатьВсе, что было написано, очевидно, игнорируется, но если я удаляю a, все работает нормально.Но мне нужно это сделать, только если <img> окружен <a>.Почему это не сработает?

Answer 1

#banner img a означает «Элемент a , содержащийся в элементе img , содержащемся в элементе с идентификатором * banner ».

Вы хотите: #banner a img, если хотите выбрать элемент img.

Answer 2

Я думаю, что вы хотите иметь запятую между элементами HTML, к которым хотите применить стиль.Попробуйте #banner img, a{ ... } вместо.