HTML-гиперссылки не работают при создании нескольких

#html #hyperlink

Вопрос:

Когда я кодирую более одной гиперссылки, отображается только последняя. В этом примере с этим кодом при запуске отображается только фиолетовый в пространстве красной гиперссылки. Я пробовал менять позиции на случай, если это связано с наложениями, но это оказалось безрезультатным. Пожалуйста, помогите, спасибо, Зедтеслот.

 <style>
    a:link, a:visited {
      height: 375px;
      width:750px;
      background-color: #ff1100;
      color: white;
      padding: 15px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      text-shadow: 0 4px 4px #000;
      border: #000000;
      border-style: solid;
      border-width: 5px;
      position: absolute;
      top: 325px;
      right: 1000px;
    }
    
    a:hover, a:active {
      background-color: red;
    }
    
    </style>
    </head>
    <body>
      
    <a href="https://google.com" target="_blank">Google</a>
    
    <style>
      a:link, a:visited {
        
        height: 375px;
        width:750px;
        background-color:blueviolet;
        color: white;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 4px 4px #000;
        border: #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        top: 325px;
        left: 1000px;
      }
      
      a:hover, a:active {
        background-color:blueviolet;
      }
      
      </style>
      </head>
      <body>
        
      <a href="https://google.com" target="_blank">Google</a>
 

Комментарии:

1. Похоже, вы перезаписываете стили, и все ссылки имеют одинаковое положение. Попробуйте добавить пояснения в css, a a:наведите курсор и т.д. Или добавьте отдельные классы для 1-й и 2-й ссылок.