тег внутри другого тега html

Question

.button1{ 


    background: #E68A00 url(wooden.jpg) repeat-x; 
    border: 2px solid #eee; 
    height: 28px; 
    width: 115px; 
    margin: 50px 0 0 50px; 
    padding: 0 0 0 7px; 
    overflow: hidden; 
    display: block; 
    text-decoration:none; 
    font-family: 'Sacramento', cursive; 
    color : white; 
    font-size: 30px; 




    /*Rounded Corners*/ 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px; 
border-radius: 15px; 

/*Gradient*/ 
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 

/*Transition*/ 
-webkit-transition: All 0.5s ease; 
-moz-transition: All 0.5s ease; 
-o-transition: All 0.5s ease; 
-ms-transition: All 0.5s ease; 
transition: All 0.5s ease; 


} 

pg.button1{ 
position:absolute; 
right:0px; 
top:100px; 

} 

pg:hover { 
    width: 200px; 
} 






<pg <a class = "button1" href="http://www.google.com">Small $14 </a> </pg>## Heading ## 

Этот тег был ссылкой, пока я не представила тег pg, который предназначен для размещения ссылки на экране. Причина в том, что я все еще хочу использовать класс с другими объектами! поэтому мне не нужно дублировать мой код! Я создал теги как p1 p2 p3 p4 для использования с тем же классом Он фактически позиционирует его, но его больше не ссылка! Почему это ? и как мне получить эту работу снова?

Answer 1

Вместо того, чтобы придумывать новые теги, просто используйте несколько классов. В этом случае, в зависимости от того, что вы на самом деле пытается сделать, вы можете сделать это:

<a class="button1 pg" href="...">Small $14</a> 

Или это:

<div class="pg"><a class="button1" href="...">Small $14</a></div>