CSS Селектор псевдокласса: первый - Что это? Я нашел в примере кода и не могу найти документацию по нему - PullRequest
Новая
       20

CSS Селектор псевдокласса: первый - Что это? Я нашел в примере кода и не могу найти документацию по нему

2 голосов
/ 19 января 2020

В некоторых примерах кода здесь, в w3schools селектор: ul li: first

Не могу найти документацию по этому использованию : first Здесь он делает только «Coffee» hide (), а не «Coffee 2». Я новичок в jQuery, так что, возможно, в нем есть какое-то еще не раскрытое значение. скриншот кода из Tryit Editor

1 Ответ

0 голосов
/ 19 января 2020

Я вижу, что комментарии отвечают на вопрос справедливо; но я бы хотел остановиться на одном вопросе, поднятом Ори Дрори. Хотя селектор :first похож на :first-child, есть внутреннее различие.

Давайте воспользуемся тем же примером, который приведен в вопросе: 

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>
<button>Click me</button>

Когда мы запустим следующее скрипт: 

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});

Элемент <li>Coffee</li>, присутствующий в Списке 1, скрывается. Однако тот, что присутствует в списке 2, остается видимым.

Если вместо этого мы должны будем использовать селектор :first-child следующим образом: 

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});

Оба элемента <li>Coffee</li> будут скрыты.

Это потому, что селектор :first обращается к первому узлу DOM, который удовлетворяет заданным условиям, то есть к первому элементу, выбранному под данным селектором.

В то время как селектор :first-child более конкретен c и выбирает узел, который является первый дочерний элемент его родительского элемента. Как мы видим, второй элемент <li>Coffee</li> является первым дочерним элементом списка <ul>List 2</ul> Следовательно, если мы используем второй сценарий, оба элемента будут скрыты.

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

...