.blog a:hover + .inicio-post,
.blog a:focus + .inicio-post {
display: block;
.blog a:hover + .inicio-post,
.blog a:focus + .inicio-post {
display: block;
<section class="secao-inicio blog">
<h2>Blog</h2>
<small>Últimos posts</small>
<ol class="titulos-blog">
<li><a href="blog.html" class="titulo1">O essencial de design responsivo</a>
<p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
</p>
</li>
<li>
<a href="blog.html" class="titulo2">Por que fazer páginas acessíveis?</a>
<p class="segundo-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
</p>
</li>
<li>
<a href="blog.html">JavaScript não obstrusivo</a>
</li>
</ol>
<a class="botao-index" href="blog.html">Veja mais</a>
</section>
Oi Geovanni, tudo certinho?
Mas você está com a classe blog
no seu HTML, logo ali na primeira linha:
<section class="secao-inicio blog">
No caso, essa section
está com duas classes:
secao-inicio e
blog
Espero ter ajudado,
Abcs!