Как мне узнать, какой класс / селектор я должен использовать для стилизации своего элемента?

Question

На рисунке ниже показана кодировка моего Navbar. Я хочу стилизовать кнопку «Забронировать сейчас», изменив цвет и добавив рамку вокруг него, что я знаю, как это сделать. Единственная часть, над которой я борюсь, - это определение класса для выбора, только кнопка «Забронировать сейчас».

Ваша помощь будет высоко ценится!

Answer 1

Вот как я бы это сделал:

div[data-navlink-handle='book-now'] > a

По сути, находит div с атрибутом data-navlink-handle, равным book-now. Делая предположение, что дескриптор вряд ли изменится, даже если текст изменится.

Или, возможно: div.navbar-item[data-navlink-handle='book-now'] > a

Answer 2

У вас нет уникальных идентификаторов для этого элемента. Вы должны рассмотреть возможность добавления идентификаторов. Или вы можете использовать селектор a[innertext='Book Now'] или div:contains('Book Now'), но это довольно плохо, потому что ваш стиль сломается, если вы измените содержимое.