<a href="#"  style="background-color:rgb(0, 0, 0);">

I have a, nav-link and active

I tried this way but it didn't work

<style>
        a.nav-link.active {
          background-color: rgb(0, 0, 0);
        }
</style>

CodePudding user response：

Question 1: Why is it not working?

The issue is that there is no content inside of the <a>, and there is not a closing tag.

Fixed snippet:

a.nav-link.active {
  background-color: rgb(0, 0, 0);
}

<a href="#"  style="background-color:rgb(0, 0, 0);">Link</a>

Question 2: Should it be inside of a file or head?

That's really up to you. Both ways work the same.

CodePudding user response：

The problem is this:

Your link tag <a> has no content. Link tags are inline elements by default, meaning they take just the width and height required to display them. So, no content means the element is widthless and heightless. To fix this, you need to define the link element as an inline-block element or a block element (if you don't want it to sit next to other elements horizontally) and set width and height for it.

Solution:

Define <a> as an inline-block element:

a.nav-link.active {
    display: block;
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);
}

Also, ensure you close your <a> tag:

<a href="consulta_relatorio.html" 
    
   aria-current="page" 
   style="background-color:rgb(0, 0, 0);">
</a>

Lastly, keep in mind that inline styles (style="...") will override styles applied through classes.

CodePudding user response：

Are you leaving the inline styling in? The style attribute in your tag will take priority over the one in your tags, but even so I made a small test HTML file with the same and it appears to work fine however no color will be displayed. You can see it in the developer tools of your browser if testing there. You need to add this to visually see it:

a.nav-link.active {
  background-color: rgb(0, 0, 100);
  <br>height: 50px;
  <br>width: 50px;
  <br>display: block;
  <br>
}

<a href="#"  style="background-color:rgb(0, 0, 0);">

This will give it a block level element display attributes, which the <a> tag is not.

You can also wrap it in a div and apply these to the div tag. However, as the above comment said, I'd recommend sharing more. My guess is either you are expecting the a tag (an inline element) which doesn't have a size to show up as a color or your are overriding it due to precedence.
https://www.w3schools.com/html/html_blocks.asp