Необходимо больше CSS-селекторов

Normalize.css/reset.css

Различные браузеры могут добавлять разные свойства к html-элементам (например margin'ы и padding'и) у списков. Для того, чтобы сбросить все такие дополнения у браузеров к проекту подключают файл reset.css

Более поздняя версия для HTML5 normalize.css

Селектор *

Данный селектор воздействует на все теги в документе

* {
padding:0px;
margin:0px;
}

Конечно такой глобальный охват не всегда удобен, поэтому чаще всего данный селектор применяется в каком-то контексте.

.block * {
  border-width:0px ;
}

то есть все теги внутри класса block будут без границ.

:not()

Применяет оформление ко всем тегам, кроме заданного

https://developer.mozilla.org/en/docs/Web/CSS/:not

https://css-tricks.com/almanac/selectors/n/not/

Селекторы атрибутов

Очень подробно о различных селекторах атрибутов https://habrahabr.ru/post/85920/

[src] {
    border:10px solid grey;
}

nth-of-type

<style> 
div:nth-of-type(2) {
    background: #ff0000;
}
</style>

<h1>Это заголовок</h1>
<div>The first paragraph.</div>
<div>Это второй параграф, к которому применится оформление</div>
<div>The third paragraph.</div>
<div>The fourth paragraph.</div>

nth-child похож на nth-of-type, но применяется просто к элементу-ребенку с заданным номером, если его тип совпал с заданным.

То есть p:nth-child(2) применится ко второму ребенку в body, если он оказался параграфом.

https://www.w3schools.com/cssref/sel_nth-child.asp

odd, even, формула an+b

Примеры:

https://css-tricks.com/useful-nth-child-recipies/

last-child first-child

li:nth-last-child(2) {
    color: green;
}

::selection

Задаем оформление выделяемых элементов

.block::selection {
    color:red;
    background-color:yellow;
}

user-select

Убираем выделение для текста или других элементов. Подходит для кнопок, цвет которых может измениться при выделении

.block {
    user-select: none;
}

cursor

С помощью этого свойства мы можем задать оформление для курсора над нашим div'ом, который мы маскируем под кнопку

.block {
    cursor: pointer;
    cursor: hand;
}

Интересное чтиво:

1. Интересные применения селектора :not
   http://bitsofco.de/on-not-and-specificity/

Практика:

1. Создаем чередующие окрашенные строки (два цвета)
2. Создаем чередующие окрашенные строки (три цвета)
3. Создаем шахматную доску 5*5
4. Двухцветный список, через каждые пять элементов появляется отступ
5. Задаем разное оформление для внутренних и внешних ссылок
6. Все jpeg'и оборачиваем в зеленую каемочку, а gif'ы в красную
7. Делаем буквицу – в первом абзаце страницы, выделяем первую букву
8. Есть каталог домов с камином, бассейном и домашними животными. Пользователь наводит на ссылку посвященную каминам, и для него остаются блоки только с камином.