Top.Mail.Ru
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+4

В чем ошибка использования селекторов

почему не применяется значения классам notifications и т.д. в account-page-icon

1
 css: 


1234567891011121314
 .notifications-block + .account-page-icon-block{ 
    width: 40px; 
    height: 100%; 
} 
.notifications + .account-page-icon{ 
    width: 100%; 
    height: 100%; 
    padding: 10px; 
} 
.notifications img + a.account-page-icon img{ 
    width: 100%; 
    height: 100%; 
} 
 
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
 html:
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="css/index.css"> 
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap" rel="stylesheet"> 
    <title>OnceOren</title> 
</head> 
<body> 
    <header> 
        <div class="container"> 
            <div class="title"> 
                <a href="#"> 
                    <img src="https://img/logotype.svg" width="-1" height="-1" alt = "false|false"/> 
                    <h1>OnceOren</h1> 
                </a> 
            </div> 
            <div class="input-search-models-block"> 
                <form action="."> 
                    <input class="input-search-models" type="text" placeholder="Чем помочь?"> 
                </form> 
            </div> 
            <div class="navigation-block"> 
                <ul class="navigation"> 
                    <li class="navigation-item"> 
                        <a href="">Мои заказы</a>     
                    </li> 
                    <li class="navigation-item"> 
                        <a href="">Создать заказ</a>     
                    </li> 
                </ul> 
            </div> 
            <div class="notifications-block"> 
                <a href="#" class="notifications"> 
                    <img src="https://img/colocol.svg" width="-1" height="-1" alt = "false|false"/>   
                </a> 
            </div> 
            <div class="account-page-icon-block"> 
                <a href="" class="account-page-icon"> 
                    <img src="https://img/user_avatar.svg" width="-1" height="-1" alt = "false|false"/> 
                </a> 
            </div> 
        </div> 
    </header> 
</body> 
</html> 
По дате
По рейтингу
Аватар пользователя
Искусственный Интеллект
123456789101112131415161718
 /* Стили для .account-page-icon-block, когда он следует сразу за .notifications-block */ 
.notifications-block + .account-page-icon-block { 
    width: 40px; 
    height: 100%; 
} 
 
/* Стили для .account-page-icon, когда он следует сразу за .notifications */ 
.notifications-block + .account-page-icon-block .account-page-icon { 
    width: 100%; 
    height: 100%; 
    padding: 10px; 
} 
 
/* Стили для .account-page-icon img, когда он следует сразу за img внутри .notifications */ 
.notifications-block + .account-page-icon-block .account-page-icon img { 
    width: 100%; 
    height: 100%; 
}