Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы работы с селекторами в CSS на HTML странице

Селекторы в HTML — пример файла index.html с комментариями

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="selectors.css">
    <title>Селекторы</title>
</head>
<body>
<ul>
    <li><a>anchor</a></li>
    <li><a>anchor</a></li>
    <li><a>anchor</a></li>
</ul>
<!--Вы добавляете атрибут класса в HTML-тэг, чтобы вы могли иметь доступ к нему через CSS-->
<ul class="nav">
    <li><a>anchor</a></li>
    <li><a>anchor</a></li>
    <li><a>anchor</a></li>
</ul>
</body>
</html>

Селекторы в CSS — пример файла selectors.css с комментариями

/*Селекторы*/
/*Позволяют вам указывать стили для любых элементов*/

/*Классы*/
/*Вы можете использовать классы, чтобы различать одни и те же типы тегов*/
/*Вы можете получить доступ к классам в CSS, поставив точку перед именем класса*/
.nav {
    padding-left:20px;
}
/*Классы в селекторах потомков*/
/*Классы могут быть использованы взаимозаменяемо с тегами*/

/*Этот селектор найдет все теги <a> которые являются дочерними к любому тегу с классом .nav */
.nav a{
    color:seagreen;
}

/*Селекторы: Порядок*/

/*Когда вы используете тип селектора, порядок не важен*/
/*Когда вы используете класс и тип селектора, порядок важен*/

/*Этот отступ элемента ul переопределяет отступ класса .nav  потому что идет после .nav*/
ul {
 padding: 0 0 0 50px;
}

/*Лучшая практика*/

/*Сначала объявите самые обширные правила с помощью селекторов.*/
/*Затем объявите правила с помощью селекторов классов*/

/*Более широкие правила каскадируются и становятся стандартными*/
/*Более специфические правила могут изменять стандартные значения*/
ul {
    padding: 0 0 0 50px;
}
.nav {
    padding-left:20px;
}