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时会出现特殊问题。

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

CODE SNIPPET [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>

CODE SNIPPET [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删除列表下划线

3 个答案: