Diferenças entre posicionamento da pseudo-classe | Front-end

Olá Kevin, tudo bom?

Vamos lá, o que acontece no primeiro exemplo é que se o evento :hover acontecer na .classe e o elemento p vai receber a estilização. Já no segundo exemplo o evento :hover precisa acontecer na tag p e a estilização aplicada ao mesmo.

Segue um exemplo para você ver como funciona.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .principal {
            border: 1px solid red;
        }

        .principal2 {
            border: 1px solid blue;
        }

        .principal:hover p {
            color: blue;
        }

        .principal2 p:hover {
            color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <img id="banner" src="banner.jpg">
    <div class="principal">
        <h1>Sobre a Barbearia Alura</h1>

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor
            para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos
            clientes a cada dia.</p>
    </div>
    <div class="principal2">

        <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos
                    clientes"</strong>.</em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de
            excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
    </div>
</body>

</html>

Abraço Kelvin, bons estudos.