How to style the post previews/links without it affecting the main posts?

As long as your theme is set up in the “normal” way, this is fairly easy.

Lets take the markup for the Twenty Fourteen as an example. The type of page you are currently viewing creates a class on the <body>. So for a front-page blog (several articles) the <body> element contains the class “blog”, A single post contains the class “single”. (There are also classes like “archive” and “page” and so on.)

So to format a single post, you add “.single” to your css.

/* css */
.single .post { 
    /* affects only single posts */
}
.single .post h1 { 
    /* affects only the <h1> of .single posts */
}

To format the list of posts on a blog page, you add .blog.

/* css */
.blog .post { 
    /* this affects only posts on a .blog page */
}
.blog .post h1 { 
    /* this affects only the <h1> of posts on a .blog page */
}

So keep using DevTools, but take a look at the classes of the <body> element.