用CSS删除列表下划线

Question

因此，我使用Wordpress来制作我的网站(www.codedgames.com)，我使用的主题在它的列表中添加了一个下划线，而不是其他的。我想删除与CSS页脚的“最近的博客文章”小部件的下划线。我并不擅长CSS或HTML，所以我不知道如何解决这个问题。任何帮助都将不胜感激。下面是与列表关联的HTML：

    <div id="footer_two" class="span4">

<aside id="recent-posts-3" class="widget widget_recent_entries">        
<h3 class="widget-title">Recent Blog Posts</h3>     <ul>
                    <li class="">
                <a href="http://codedgames.com/moto-360-on-iphone-review/">Moto 360 on iPhone Review</a>
                        </li>
                    <li class="">
                <a href="http://codedgames.com/how-good-is-tgt/">How Good is TGT?</a>
                        </li>
                    <li class="">
                <a href="http://codedgames.com/dr-boom-used-to-suck-theory/">Dr. Boom Used to Suck – Card Theory</a>
                        </li>
                    <li class="">
                <a href="http://codedgames.com/how-to-become-a-rocket-league-pro/">How to Become a Rocket League Pro!</a>
                        </li>
                    <li class="">
                <a href="http://codedgames.com/how-to-start-a-twitch-channel/">How to Start a Twitch Channel in 6 Minutes!</a>
                        </li>
                </ul>
        </aside>        
                                                                                                     </div>

Answer 1

.widget_recent_entries li {
   border-bottom: none !mportant;
   position: relative;
}

Answer 2

正确的元素上的text-decoration: none;应该这样做..。

Answer 3

可以在锚text-decoration: none;元素中使用CSS属性<a>。

首先，您必须针对您的容器，即#recent-posts-3，然后是其中的所有锚。

所以你的选择者是：

#recent-posts-3 a

我怀疑您是否会有特定的问题，因为您使用的是id。

注意:我强烈建议您在悬停时添加一些样式或更改，以让用户知道那里有一个链接。您可以在第二个演示中看到这个替代方案。

代码片段1

​

#recent-posts-3 a {
  text-decoration: none;
}

<div id="footer_two" class="span4">

  <aside id="recent-posts-3" class="widget widget_recent_entries">
    <h3 class="widget-title">Recent Blog Posts</h3>
    <ul>
      <li class="">
        <a href="http://codedgames.com/moto-360-on-iphone-review/">Moto 360 on iPhone Review</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/how-good-is-tgt/">How Good is TGT?</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/dr-boom-used-to-suck-theory/">Dr. Boom Used to Suck – Card Theory</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/how-to-become-a-rocket-league-pro/">How to Become a Rocket League Pro!</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/how-to-start-a-twitch-channel/">How to Start a Twitch Channel in 6 Minutes!</a>
      </li>
    </ul>
  </aside>

​

代码片段2

​

#recent-posts-3 a {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
#recent-posts-3 a:hover {
  background-color: gold;
  border-bottom-style: solid;
}

<div id="footer_two" class="span4">

  <aside id="recent-posts-3" class="widget widget_recent_entries">
    <h3 class="widget-title">Recent Blog Posts</h3>
    <ul>
      <li class="">
        <a href="http://codedgames.com/moto-360-on-iphone-review/">Moto 360 on iPhone Review</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/how-good-is-tgt/">How Good is TGT?</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/dr-boom-used-to-suck-theory/">Dr. Boom Used to Suck – Card Theory</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/how-to-become-a-rocket-league-pro/">How to Become a Rocket League Pro!</a>
      </li>
      <li class="">
        <a href="http://codedgames.com/how-to-start-a-twitch-channel/">How to Start a Twitch Channel in 6 Minutes!</a>
      </li>
    </ul>
  </aside>

​