display:block with pseudo-class not working inside div-CodePudding

I was working with pseudo-classes (link, visited, and active) and I have an issue about positioning a link below the others (like a list, I know I can use a list but want to know why is this happening), used display: block but isn't working, the first one works but the second doesn't even though I put display block on all three, here is my codes.

.divlink,
.link:link {
  display: block;
}

.divlink,
.vis:visited {
  display: block;
}

.divlink,
.activ:active {
  display: block;
}

<div >
  <a  href="https//:youtube.com">Youtube</a>
  <a  href="https//:google.com">Google</a>
  <a  href="https//:facebook.com">Facebook</a>
</div>

Here are the screenshots

This is how it looks:

And this i how i want to be look like, the only way i can do this is by removing the pseudoclass ":visited" Thanks in advance.e:

CodePudding user response：

Because you are only setting display:block to the parent divlink and the pseudo classes not the a,

you are only getting the first link displayed as block because :link is a un-visited link, the other two :visited and :active, aren't displayed as block because the link in the second rule wasn't visited and in the last one it isn't active

You can set to a or a class in a because the pseudo classes will inherit from it

.link  {
  display: block;
}

<div >
  <a  href="https://youtube.com">Youtube</a>
  <a  href="https://google.com">Google</a>
  <a  href="https://facebook.com">Facebook</a>
</div>

CodePudding user response：

just set this code:

.divlink a {
display: block;
}

just remove all those codes and put this. this will make the link just like what you've wanted as an output.