Lo que quiero hacer es dar color solo a un Texto de la barra de navegación y a los demás dejarlos en blanco ya que el fondo es oscuro, Ya puse todos los textos en blanco que son Etiquetas "a", pero el problema es cuando intento cambiar a otro color un solo texto que le puse una clase de nombre "button" y no cambia el color porque supongo que vale mas un selector de Etiqueta que un selector de Clase, Quisiera saber de que forma puedo solucionarlo, ya se que podría poner una clase diferente a todas las etiquetas menos a la que quiero cambiar y así si resulta lose ya lo hice pero quisiera saber si existe otra forma o es la única.?
Aqui les dejo el codigo:
header {
width: 100%;
background-color: #18162c;
height: 70px;
}
.nav {
width: 65%;
margin: auto;
height: 100%;
}
.grid li a{
text-decoration: none;
color: #ffffff;
font-size: 20px;
font-family: SF Pro Display;
font-weight: 200;
}
.grid li {
text-align: center;
}
.button {
color: #1D9AF2;
background-color: #292D3E;
border: 1px solid #1D9AF2;
border-radius: 6px;
padding: 8px 24px;
cursor: pointer;
height: 20px;
font-size:18px;
box-shadow: 0 0 4px #999;
background-position: center;
transition: background 0.2s;
}
.button:hover {
background:#47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
color: white;
}
/*Aqui e codigo de CSS GRID*/
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
height: 100%;
align-items: center;
grid-gap: 20px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./reset1.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./grid.css">
<title>Document</title>
</head>
<body>
<header>
<nav class="nav box">
<ul class="grid box">
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#" class="button">Lorem</a></li>
</ul>
</nav>
</header>
</body>
</html>