Я новичок в программировании. Я пытаюсь создать портфолио с нуля. На панели навигации я хочу выбрать первую ссылку, чтобы раскрасить ее по-другому. Может ли кто-нибудь сказать мне, как лучше всего выбрать первую ссылку из неупорядоченного списка?
<ul id = "main-nav">
<li>
<a href = "#" class = "nav-links">
<i class = "fas fa-home"></i>Home</a>
</li>
<li>
<a href = "#about" class = "nav-links"><i class = "fas fa-info-circle"></i>About Me</a>
</li>
<li>
<a href = "#portfolio" class = "nav-links"><i class = "fas fa-image"></i>Portfolio</a>
</li>
<li>
<a href = "#contact" class = "nav-links"><i class = "fas fa-envelope"></i>Contact</a>
</li>
</ul>
Я знаю, вы сказали, что новичок, но вам нужно научиться правильно пользоваться этим сайтом. Включая проверку существующих ответов.
Имейте в виду, что для изменения цвета ссылки вы хотите не только выбрать первый элемент <li>
, но также и <a>
внутри него (поскольку ссылки не наследуют автоматически цвет своего родительского элемента).
li:first-child a {
color: red;
}
<ul id = "main-nav">
<li>
<a href = "#" class = "nav-links">
<i class = "fas fa-home"></i>Home</a>
</li>
<li>
<a href = "#about" class = "nav-links"><i class = "fas fa-info-circle"></i>About Me</a>
</li>
<li>
<a href = "#portfolio" class = "nav-links"><i class = "fas fa-image"></i>Portfolio</a>
</li>
<li>
<a href = "#contact" class = "nav-links"><i class = "fas fa-envelope"></i>Contact</a>
</li>
</ul>
они автоматически наследуют цвет, НО они могут иметь цвет по умолчанию, определенный другим стилем или браузером ... и выбор a
не изменит цвет во всех случаях, это произойдет, только если нет более конкретного правила, что это
@TemaniAfif В Спецификация W3C для стилей по умолчанию HTML5 указаны цвета ссылок, поэтому нет современных браузеров, в которых ссылки a
автоматически наследуют цвет своего родителя без дополнительных правил (например, a { color: inherit }
).
они всегда будут наследовать, но это правило будет иметь приоритет ... неверно говорить, что они не будут наследовать. Они будут, НО нам нужно учитывать применяемое по умолчанию правило ... если вы проверите вкладку вычислений в инструментах разработчика, вы увидите, что цвет наследуется, а затем переопределяется, но стиль по умолчанию. цвет всегда наследуется, но, конечно, нам нужно проверить другие правила, чтобы решить, какой цвет использовать
@TemaniAfif Я не понимаю, почему неверно утверждать, что ссылки не наследуют автоматически цвет своего родителя. Нет современных браузеров, в которых вы можете изменить цвет ссылки, ориентируясь только на ее родительский элемент, из-за стилей браузера по умолчанию в спецификации W3C. Я говорю в практических терминах, которые полезны для написания рабочего CSS, а вы спорите о семантике и высказываете спорный вопрос.
Селектор: first-of-type соответствует каждому элементу, который является первым дочерним элементом определенного типа своего родителя.
Пример:
.myNav {
width: 200px;
}
ul {
list-style: none;
}
li {
padding: 5px;
border-radius: 6px;
margin-top: 4px;
}
li:hover {
background: red;
color: #fff;
cursor: pointer;
}
li:first-of-type {
background: red;
color: #fff;
}
<div class = "myNav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
Ли: первенец?