CSS Style Won't Apply to Link-CodePudding

I want to style my links for presentation in a navigation bar.

I have applied a class to it (nav-item), and created a style for it. I can see the class applied to the link in the browser. For some reason the style will not apply. When I remove .nav-item > from the beginning of the CSS my links style fine. Only when I apply them as class styles do they not work.

I probably overlooked something simple, but I am at a loss.

Here is the React code that renders my links:

import {React} from 'react'; 
import {BrowserRouter} from 'react-router-dom';
import {Link} from 'react-router-dom';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <Link to='/' className="nav-item" >Home</Link>
      <Link to='/about' className="nav-item" >About</Link>
    </BrowserRouter>
  )
}

export default App;

Here is the CSS to style the links:

.nav-item > a {
  background-color: #0958f6;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

CodePudding user response：

Just .nav-item should be enough, try:

.nav-item {   
  background-color: #0958f6;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
 }