在锚点内插入一个 div，删除 div 元素中的锚点样式

Question

I'm trying to make the whole div clickable, but removing any styling that the anchor adds to the div. I cannot use JS for this.

HTML code

<a href="https://stackoverflow.com" target="_blank">
  <div class="style1">
    <div class="style2">
      <div class="style3_">
        <div>
          <div class="text1">
            Here is the Text 1
          </div>
          <span class="text2">
            Here is the text 2
          </span>
        </div>
        <a href="https://stackoverflow.com" target="_blank">
          Link
        </a>   
      </div>
   </div>
  </div>
</a>

CSS code:

.style1 {
  padding: 16px;
}

.style2 {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: none
}

.style3 {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
}

.text1 {
  line-height: 1.5rem;
  font-size: 1rem;
  letter-spacing: .00625rem;
  font-weight: 500;
}

.text2 {
  line-height: 1rem;
  font-size: .75rem;
  letter-spacing: .025rem;
  font-weight: 400;
}

Answer 1

a tags usually adds an underline to indicate that it is a link, that's actually just a text decoration, to remove that you can add text-decoration: none; to whatever class you want the style to be removed, or you can add that to the anchor tag directly. See the snippet below for your reference:

 .style3 { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background-color: #fff; border: 1px solid #dadce0; box-shadow: none; padding: 16px; width: max-content; gap: 2rem; }.text1 { line-height: 1.5rem; font-size: 1rem; letter-spacing: .00625rem; font-weight: 500; }.text2 { line-height: 1rem; font-size: .75rem; letter-spacing: .025rem; font-weight: 400; } a{ text-decoration: none; color: black; flex: 1; height: 100%; }

 <a href="https://stackoverflow.com" target="_blank"> <div class="style3"> <div> <div class="text1"> Here is the Text 1 </div> <span class="text2"> Here is the text 2 </span> </div> <div> Link </div> </div> </a>