Adição ou não do '>' gerando resultados diferentes, no main h1 | HTML5 e CSS3 I: Suas primeiras páginas da Web

Primeiramente, minha dúvida é: por que no meu projeto tenho 4 arquivos (bio.html, blog.html, bio.css e site.css que foram feitos através dos exercícios pós vídeo-aula), e o projeto da vídeo aula só conta com dois (bio.html e bio.css)?

Bem, coloquei o main h1 no bio.css para excluir o "João da Silva" da tag nav da formatação, e nada aconteceu. Coloquei main h1 tanto no bio.css quando no site.css e nada também. Procurando nas perguntas vi a possibilidade de adicionar o '>' entre o main e o h1.

Obs: percebi que no vídeo, a fechadura da tag main está antes da tag img, e não onde está fechando no código abaixo. Mas o problema mantém, substituindo o '>' pelo próprio main nos diversos casos.

Resumindo: '>' só no bio.css, texto menor, mas com a msm formatação; fundo roxo e letra branca. '>' só no site.css formatação igual o do titulo principal da página. '>' tanto no bio quanto no site.css, só então a formatação não é aplicada.

Poderiam me esclarecer o por quê disso acontecer?

Bio.html:

<!DOCTYPE html>
<html>
<head>
        <title>Biografia João da Silva</title>
        <meta charset="utf-8" >
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="bio.css">
        <link rel="stylesheet" href="site.css">
        <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <!-- carrega a fonte Open Sans Condensed na versão negrito, -->
        <!-- que é a única necessária para os cabeçalhos            -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
    <main>
            <h1>  Sobre mim</h1>

            <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>
            <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

            <h2>Como trabalho</h2>
            <blockquote>
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite>José Souza, Fiat</cite>
            </blockquote>

            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

            <p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>

            <h2>Experiência</h2>

            <blockquote>
                <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes</p>
                <cite>Manoel Santos, Petrobás</cite>
            </blockquote>

            <p>Já desenvolvi projetos para grandes empresas como <a href="https://www.bmw.com.br/pt/index.html">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
            <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="blog.html">blog</a>.</p>
            <img src="eu.jpg" alt="Foto de João da Silva">
            <nav>
                <h1>João da Silva</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                </ul>
            </nav>
    </main>
</body>
</html>

Site.css:

body{
    font-family: "Crimson Text" , serif;
    background-color: #F2FFFC;

}

main > h1{
    font-family: "Open Sans Condensed" , sans-serif;
    text-align: center;
    color: #FFF;
    background-color: #851944;

}

h2{
    font-family: "Open Sans Condensed" , sans-serif;
}

p{
    text-align: justify;
}

bio.css:

main  h1{
    font-size:60px;
    background-color: rgb(120 , 30, 60);
    color: #FAFFFA;
    text-align: center;
    font-family: "Arial";
}
h2 {
    font-size:32px;
    font-family: "Open Sans" , sans-serif;
}

Fala Jhonatan!

Tranquilo?

Então, no CSS o > ele faz com que a seleção do CSS seja específica, por exemplo no seu caso main > h1 { ... } as propriedades deste só irão afetar os h1 que forem como filhos diretos do main conforme exemplo abaixo:


<main>
    <h1>Este recebe as propriedades do main > h1</h1>
    <div>
        <h1>Este já não recebe as propriedades do main >
 h1</h1>
    </div>

Quando você não usa o > você está dizendo que todos os h1 que estiverem dentro do main independente de quem seja o pai direto, conforme exemplo abaixo:


<main>
    <h1>Este recebe as propriedades do main h1</h1>
    <div>
        <h1>Este também recebe as propriedades do main
 h1</h1>
    </div>
    <div>
        <div class="outraClasse">
            <h1>Também recebo as propriedades</h1>
        </div>
    </div>

Espero ter ajudado!

Abraços!

Mergulhe em programação