Moskus

Если вы просто заставляете browser показать картинку меньшего размера, в действие вступают методы быстрой интерполяции, которые использует browser. Любое уменьшение не в целое число раз (например, в два или три) вызывает ситуацию, когда, например, три пикселя превращаются в два (когда вы картинку шириной в 600 пикселей показываете шириной 400). Цвета смешиваются, границы размываются.
Предварительная генерация изображений для разных разрешений или использование векторных изображений решают эту проблему так или иначе. (Это не означает, что вы можете вставить растр в SVG и сказать, что теперь эта картинка - векторная.)

https://support.google.com/webmasters/answer/35769

Зачем включать в селектор все элементы вложенности? Конструкция, как в вашем примере, может быть нужна только если ваш class4 может содержаться в десятке разных структур дерева и, главное, иметь разное оформление. БЭМ, который многие считают чуть ли не панацеей - техника, которая была придумана для разметки, генерируемой автоматически. Если верстка делается вручную, у вас есть возможность подумать головой и спланировать разметку.

https://www.w3schools.com/cssref/css_selectors.asp это часть синтаксиса селекторов, а не свойств.
Категорически советую усвоить верную терминологию.

Скриншот может быть результатом вот этого, на самом деле
https://developer.mozilla.org/en-US/docs/Tools/Sty...

А так - препроцессоры подключаются вот так, например lesscss.org/usage/#using-less-in-the-browser

https://bugs.chromium.org/p/chromium/issues/detail... - давно существующий известный баг. Решение - забить, либо не заниматься ерундой с custom cursor - они только с толку сбивают, как правило.
Да, и это явление описывается словам "видимый aliasing", а не "неровный" или "пиксельный".

Это почему на CSS этого не сделать?
Для чего, по-вашему, служит инструкция background-size: cover?
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://caniuse.com/#feat=background-img-opts

Вам не нужен clip-path, вам нужен чистый SVG.
https://websitebeaver.com/how-to-make-an-interacti...

Читается, как "элемент, являющийся и первым, и последним потомком одновременно".

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

Но в общем случае URI есть тонкости. Относительный URI может требовать употребления ./ в явном виде, потому что двоеточие в URI может иметь разные значения и одно из них имеет преимущество. Скажем, если ваш относительный путь ass:hole/butt (это возможно, но не в случае HTTP URL), вам нужно писать ./ass:hole/butt, иначе это не будет интерпретировано, как относительный путь, а будет, как scheme component ass и абсолютный путь hole/butt.

И ваш CSS, и ваш HTML должны быть в одной кодировке (предпочтительно, в UTF-8), в обоих должна быть декларация кодировки, для CSS:
@charset "UTF-8";
для HTML:
<meta charset="UTF-8"> внутри заголовка. Ну и смотрите, чтобы сервер не был настроен на автоматическую перекодировку по традициям из конца девяностых.