使用 CSS 删除列表下划线

Question

所以我正在使用 Wordpress 制作我的网站 (www.codedgames.com)，我正在使用的主题在其中一个列表上加了下划线，但其余的没有。我想用 CSS 从页脚的 "Recent blog posts" 小部件中删除下划线。我对 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

text-decoration: none; 在右边的元素上应该这样做...

Answer 2

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

Answer 3

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

首先你必须定位你的容器#recent-posts-3然后是它里面的所有锚点。

因此您的选择器将是：

#recent-posts-3 a

我怀疑你会遇到特异性问题，因为你使用的是 id。

Note: I strongly suggest that you add some styling or change on hover to let your users know there is a link there. You can see this alternative in the second demo.

代码片段 [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>

使用 CSS 删除列表下划线

Removing list underline with CSS

css

wordpress

underline