


Программирование
+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%;
}