Воспроизведение дочерних элементов CSS и потомков

Я прочитал, что использование селектора дочерних элементов (>) в css выполняется быстрее, чем селектор потомков (). Например: p > em в отличие от p em.

Мне кажется, что большая часть кода, который я вижу в дикой природе, не использует это.

Я понимаю, что некоторые обстоятельства заслуживают использования того или другого, но в целом, должен ли я стремиться к тому, чтобы использовать дочерний селектор, когда это возможно? Или я должен следовать тому, что кажется соглашением, и полагаться в основном на селектор потомков?

Ответ 1

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

Как указывалось в NullUserException, селектор не работает в IE6, поэтому, если вы заботитесь о IE6, я бы не загружал ваш CSS. Но хорошо иметь в виду, что у вас должно быть очень четкое представление о том, как использовать в этой ситуации. Спросите себя: "Я хочу, чтобы эта декларация охватывала всех соответствующих детей, или я хочу, чтобы она охватывала только детей с прямым соответствием?" Может показаться очевидным задать себе такой вопрос, но на самом деле это единственный способ выбрать между ними. Не используйте >, если вы не имеете в виду.

Также см. мой вопрос Есть ли преимущество в использовании очень специфических селекторов в CSS?

Смотрите также: поддержка селектора CSS для браузера