En general se aplica clases cuando se quiere afectar a todos los elementos tengan esa clase, si bien hay selectores que podrían ayudar a alcanzar elementos hijos, debido a que la estructura es un tercer div dentro de un segundo, y luego ese segundo dentro del primero teniendo todos la misma clase, en muchos casos lo que se haga intentando seleccionar el segundo afecta al segundo y tercer div.
Para resolver esto se podría poner un id único al elemento que se desea modificar y luego se podría hacer algo así:
.wrap {
background-color: antiquewhite;
}
#secondWrap > p {
color: blue;
font-size: 1.5rem;
}
#secondWrap > span {
color: red;
font-size: 1.5rem;
}
#secondWrap > a {
color: orange;
font-size: 1.5rem;
}
<!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" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<p>primer div</p>
<p>Test</p>
<span>prueba</span>
<a href="https://www.google.com">Ir a Google</a>
<div class="wrap" id="secondWrap">
<p>segundo div</p>
<p>Test</p>
<span>prueba</span>
<a href="https://www.google.com">Ir a Google</a>
<div class="wrap">
<p>tercer div</p>
<p>Test</p>
<span>prueba</span>
<a href="https://www.google.com">Ir a Google</a>
</div>
</div>
</div>
</body>
</html>
En este ejemplo se aplica color de fondo para todos los div con clase wrap, y se le aplica estílos específicos a los diferentes elementos que están dentro del elemento con id secondWrap.
El segundo div entonces quedaría de la siguiente manera:
<div class="wrap" id="secondWrap">
También es posible lograr lo mismo agregando una segunda clase al segundo div, sería de la siguiente manera:
En HTML:
<div class="wrap secondWrap">
En CSS:
.wrap {
background-color: antiquewhite;
}
.wrap.secondWrap > p {
color: blue;
font-size: 1.5rem;
}
.wrap.secondWrap > span {
color: red;
font-size: 1.5rem;
}
.wrap.secondWrap > a {
color: orange;
font-size: 1.5rem;
}
En este caso se está seleccionando al elemento que tiene la clase wrap y la clase secondWrap.
Por último hay selectores de CSS que pueden ser útiles como el > para los childs y otros pseudo como nth-child, first-child, y otros.
Link a documentación: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors