Не могу избавиться от ссылки underline

Question

Так что я пытался избавиться от этой ссылки подчеркивания, и я просто не могу понять ее. Я поместил text-decoration: none; на все и все, что я могу придумать, чтобы попытаться исправить эту проблему, поэтому, если у кого-нибудь есть идеи относительно того, как избавиться от этой упрямой подчеркивания, которая действительно поможет! Спасибо!

#recentwork { 
 
    background-color: #1DA0A3; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
\t text-decoration: none; 
 

 
} 
 

 
#recent{ 
 
\t padding:20px; 
 
\t text-decoration: none; 
 
\t 
 
} 
 
#recentwork img { 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 200px; 
 
\t text-decoration: none; 
 
} 
 

 
.more{ 
 
\t text-decoration: none; 
 
\t color:black; 
 
} 
 

 
.more:hover{ 
 
\t color:white; 
 
} 
 

 
.titles{ 
 
\t text-decoration:none; 
 
\t 
 
} 
 

 
.parentdiv{ 
 
    display:inline-block; 
 
\t text-decoration: none; 
 
\t 
 
} 
 

 
@media only screen and (min-width: 760px) { 
 
    #recentwork img { 
 
    width: 300px; 
 
    height: 300px; 
 
\t text-decoration:none; 
 
    } 
 
} 
 

 
.underline{ 
 
\t text-decoration: none; 
 
}

<section id="skills"> 
 
<div id="recentwork"> 
 
    <h2 id="recent"> Most Recent Work</h2> 
 

 

 
<div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<div class="underline"> 
 
<h3 class="titles"> Web Design</h3></div> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 
    
 
    <div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<h3 class="titles"> Photography</h3> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 

 
    
 
    <div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<h3 class="titles"> Print</h3> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 

 
    <div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<h3 class="titles"> Logos</h3> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 
    
 

 
</div> 
 
</section>

Answer 1

добавить текст украшения ни к a теге

#recentwork { 
 
    background-color: #1DA0A3; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
\t text-decoration: none; 
 

 
} 
 

 
#recent{ 
 
\t padding:20px; 
 
\t text-decoration: none; 
 
\t 
 
} 
 
#recentwork img { 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 200px; 
 
\t text-decoration: none; 
 
} 
 

 
.more{ 
 
\t text-decoration: none; 
 
\t color:black; 
 
} 
 

 
.more:hover{ 
 
\t color:white; 
 
} 
 

 
/* here is the change */ 
 
/* apply text decoration none to anchor tag */ 
 
a{ 
 
\t text-decoration:none; 
 
\t 
 
} 
 

 
.parentdiv{ 
 
    display:inline-block; 
 
\t text-decoration: none; 
 
\t 
 
} 
 

 
@media only screen and (min-width: 760px) { 
 
    #recentwork img { 
 
    width: 300px; 
 
    height: 300px; 
 
\t text-decoration:none; 
 
    } 
 
} 
 

 
.underline{ 
 
\t text-decoration: none; 
 
}

<section id="skills"> 
 
<div id="recentwork"> 
 
    <h2 id="recent"> Most Recent Work</h2> 
 

 

 
<div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<div class="underline"> 
 
<h3 class="titles"> Web Design</h3></div> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 
    
 
    <div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<h3 class="titles"> Photography</h3> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 

 
    
 
    <div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<h3 class="titles"> Print</h3> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 

 
    <div class="parentdiv"> 
 
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
<h3 class="titles"> Logos</h3> 
 
</a> 
 
<a href="" class="more"><h3 > See More</h3></a> 
 
</div> 
 
    
 

 
</div> 
 
</section>

Answer 2

Используйте этот

.parentDiv a { text-decoration: none; }

Должно возникнуть проблема.

Answer 3

Всего a{text-decoration:none} достаточно.

#recentwork { 
 
    background-color: #1DA0A3; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#recent { 
 
    padding: 20px; 
 
} 
 

 
#recentwork img { 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.more { 
 
    color: black; 
 
} 
 

 
.more:hover { 
 
    color: white; 
 
} 
 

 
.parentdiv { 
 
    display: inline-block; 
 
} 
 

 
@media only screen and (min-width: 760px) { 
 
    #recentwork img { 
 
    width: 300px; 
 
    height: 300px; 
 
    } 
 
} 
 

 
.underline {}

<section id="skills"> 
 
    <div id="recentwork"> 
 
    <h2 id="recent"> Most Recent Work</h2> 
 

 

 
    <div class="parentdiv"> 
 
     <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
     <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
     <div class="underline"> 
 
      <h3 class="titles"> Web Design</h3> 
 
     </div> 
 
     </a> 
 
     <a href="" class="more"> 
 
     <h3> See More</h3> 
 
     </a> 
 
    </div> 
 

 
    <div class="parentdiv"> 
 
     <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
     <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
     <h3 class="titles"> Photography</h3> 
 
     </a> 
 
     <a href="" class="more"> 
 
     <h3> See More</h3> 
 
     </a> 
 
    </div> 
 

 

 
    <div class="parentdiv"> 
 
     <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
     <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
     <h3 class="titles"> Print</h3> 
 
     </a> 
 
     <a href="" class="more"> 
 
     <h3> See More</h3> 
 
     </a> 
 
    </div> 
 

 
    <div class="parentdiv"> 
 
     <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title=""> 
 
     <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px"> 
 
     <h3 class="titles"> Logos</h3> 
 
     </a> 
 
     <a href="" class="more"> 
 
     <h3> See More</h3> 
 
     </a> 
 
    </div> 
 

 

 
    </div> 
 
</section>

Answer 4

Вы должны добавить text-decoration непосредственно a тега - не к div вашему a расположен в

Вы можете настроить таргетинг на все a тегов внутри всей вашей секции в пути. показанном ниже:

#skills a { 
    text-decoration: none; 
}