Как выбрать первый <li> в неупорядоченном списке?

Я новичок в программировании. Я пытаюсь создать портфолио с нуля. На панели навигации я хочу выбрать первую ссылку, чтобы раскрасить ее по-другому. Может ли кто-нибудь сказать мне, как лучше всего выбрать первую ссылку из неупорядоченного списка?

<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>

Ли: первенец?

Chris Li 13.09.2018 16:31

Я знаю, вы сказали, что новичок, но вам нужно научиться правильно пользоваться этим сайтом. Включая проверку существующих ответов.

Serg Chernata 13.09.2018 16:31
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
5 633
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Имейте в виду, что для изменения цвета ссылки вы хотите не только выбрать первый элемент <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 не изменит цвет во всех случаях, это произойдет, только если нет более конкретного правила, что это

Temani Afif 13.09.2018 16:48

@TemaniAfif В Спецификация W3C для стилей по умолчанию HTML5 указаны цвета ссылок, поэтому нет современных браузеров, в которых ссылки a автоматически наследуют цвет своего родителя без дополнительных правил (например, a { color: inherit }).

Jon Uleis 13.09.2018 16:54

они всегда будут наследовать, но это правило будет иметь приоритет ... неверно говорить, что они не будут наследовать. Они будут, НО нам нужно учитывать применяемое по умолчанию правило ... если вы проверите вкладку вычислений в инструментах разработчика, вы увидите, что цвет наследуется, а затем переопределяется, но стиль по умолчанию. цвет всегда наследуется, но, конечно, нам нужно проверить другие правила, чтобы решить, какой цвет использовать

Temani Afif 13.09.2018 17:02

@TemaniAfif Я не понимаю, почему неверно утверждать, что ссылки не наследуют автоматически цвет своего родителя. Нет современных браузеров, в которых вы можете изменить цвет ссылки, ориентируясь только на ее родительский элемент, из-за стилей браузера по умолчанию в спецификации W3C. Я говорю в практических терминах, которые полезны для написания рабочего CSS, а вы спорите о семантике и высказываете спорный вопрос.

Jon Uleis 13.09.2018 17:07

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>

Другие вопросы по теме