درود

first-of-type میاد تگهای فرزند اول رو سلکت میکنه. یعنی اگر المان شما به ترتیب شامل یک تگ p و دو تگ div هست، هم تگ p و هم اولین تگ div رو سلکت میکنه.

اما first-child فقط اولین فرزند که در اینجا تگ p هست رو سلکت میکنه.

برای فهم بهتر میتونید مثال تیک خورده رو بررسی کنید.