Вопрос о CSS Grid и различиях вложенности с FontAwesome
Я столкнулся с проблемой CSS Grid и вложения, и я надеюсь, что кто-нибудь поможет мне разъяснить эти различия. Вот два набора CSS, с которыми я работаю:
Первый CSS и результат:
.menu-vertical {
display: grid;
gap: 16px;
align-content: start;
& a {
padding: 8px 12px;
border-radius: 8px;
&.current {
background-color: darkgrey;
}
&.hover {
background-color: darkkhaki;
}
}
.with-icon-vertical {
display: grid;
justify-items: center;
font-size: 12px;
}
}
Второй CSS и результат:
.menu-vertical {
display: grid;
gap: 16px;
align-content: start;
& a {
padding: 8px 12px;
border-radius: 8px;
&.current {
background-color: darkgrey;
}
&.hover {
background-color: darkkhaki;
}
}
}
.with-icon-vertical {
display: grid;
justify-items: center;
font-size: 12px;
}
HTML:
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel = "stylesheet" href = "../assets/reset.css" />
<link rel = "stylesheet" href = "../assets/base.css" />
<link rel = "stylesheet" href = "style.css" />
<link href = "https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel = "stylesheet">
</head>
<body class = "padding-small">
<ul class = "menu-vertical">
<li><a href = "" class = "fa-solid fa-house with-icon-vertical">Home</a></li>
<li><a href = "" class = "fa-solid fa-map with-icon-vertical current">Map</a></li>
<li><a href = "" class = "fa-solid fa-location-dot with-icon-vertical">Location</a></li>
<li><a href = "" class = "fa-solid fa-heart with-icon-vertical">Reputation</a></li>
</ul>
</body>
</html>
Отображение моего HTML в этих двух настройках CSS совершенно разное. Может кто-нибудь объяснить, почему это происходит?
Знакомы ли вы с тем, как работают вложенные селекторы? Вы вложили один селектор в другой в свой первый блок кода CSS и не вложили его во второй — конечно, результат был бы другим! Чего именно вы ожидали?
Ответы 2
Это вопрос специфики. Font Awesome применит свойство display к .fa-solid, и только ваш первый код будет более конкретным, потому что он разрешит .menu-vertical .with-icon-vertical
Во втором случае это всего лишь .with-icon-vertical.
Чтобы оба кода вели себя одинаково, убедитесь, что ваш style.css расположен после потрясающего шрифта CSS.
<link href = "https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel = "stylesheet">
<link rel = "stylesheet" href = "style.css" />
Это восхитительно. Я понятия не имею, что такое поведение существовало. Спасибо.
Без вложенности .with-icon-vertical не находится ни в одном контейнере, поэтому он работает более гибко, изменяя свое положение или добавляя его в любое место, где требуется этот блок;
Благодаря вложению он работает внутри контейнера, который можно рассматривать как часть блока/контекста, и позволяет упростить управление и стилизацию внутри этого контейнера.
Пожалуйста, измените заголовок, чтобы задать четкий и конкретный вопрос, а не просто заявить, что он у вас есть. См. Как спросить. Кроме того, было бы идеально, если бы вы поместили оба примера в один демонстрационный фрагмент, чтобы мы могли их сравнить.