CSS 应用“文本装饰:无”时,链接文本仍带有下划线

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9793724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:20:22  来源:igfitidea点击:

Link text still underlined when "text-decoration: none" is applied

drupalcssdrupal-7

提问by user1281809

I am working on a page in Drupal 7 in which I have a number of boxes with text and a photo inside of them. I have the entire box div linking to its content page, but I can't seem to get rid of the underline.

我正在处理 Drupal 7 中的一个页面,其中有许多带有文本和照片的框。我将整个框 div 链接到其内容页面,但我似乎无法摆脱下划线。

I have tried applying text-decoration: none;to every class inside of and outside of the box and the text inside the box is still underlined.

我曾尝试申请text-decoration: none;框内外的每个班级,但框内的文字仍带有下划线。

Even when I use developer tools/'inspect element' tool in Google it shows that the computed style for the box and the text within is text-decoration: none;

即使我在 Google 中使用开发人员工具/“检查元素”工具,它也显示框和其中文本的计算样式是 text-decoration: none;

I have been trying to figure this out off and on for about a day now and I have not been able to find any solutions via Google.

我一直在尝试解决这个问题大约一天了,但我无法通过谷歌找到任何解决方案。

Any ideas?

有任何想法吗?

Thanks in advance.

提前致谢。

Edit: I am working to post my code. I am trying to find a good solution for posting because it is a page within Drupal that is rendering through Views. Also, I have a job interview in an hour that I'm getting ready for. I probably should have waited until after the interview to post this issue.. oh well.

编辑:我正在努力发布我的代码。我试图找到一个好的发布解决方案,因为它是 Drupal 中的一个通过视图呈现的页面。另外,我正准备在一小时内进行工作面试。我可能应该等到面试后发布这个问题..哦。

Edit x2: My HTML is as follows:

编辑 x2:我的 HTML 如下:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
  <title>Portfolio Page | mywebsite.com</title>
  <style type="text/css" media="all">@import url("http://url.com/modules/system/system.base.css?m178g6");
@import url("http://url.com/modules/system/system.menus.css?m178g6");
@import url("http://url.com/modules/system/system.messages.css?m178g6");
@import url("http://url.com/modules/system/system.theme.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/misc/ui/jquery.ui.core.css?m178g6");
@import url("http://url.com/misc/ui/jquery.ui.theme.css?m178g6");
@import url("http://url.com/modules/overlay/overlay-parent.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/modules/comment/comment.css?m178g6");
@import url("http://url.com/modules/field/theme/field.css?m178g6");
@import url("http://url.com/modules/node/node.css?m178g6");
@import url("http://url.com/modules/search/search.css?m178g6");
@import url("http://url.com/modules/user/user.css?m178g6");
@import url("http://url.com/sites/all/modules/views/css/views.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/sites/all/modules/ctools/css/ctools.css?m178g6");
@import url("http://url.com/sites/all/modules/lightbox2/css/lightbox.css?m178g6");
@import url("http://url.com/sites/all/modules/views_slideshow/views_slideshow.css?m178g6");
@import url("http://url.com/modules/shortcut/shortcut.css?m178g6");
@import url("http://url.com/modules/toolbar/toolbar.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/sites/all/themes/personal/css/style.css?m178g6");</style>
<style type="text/css" media="print">@import url("http://url.com/sites/all/themes/personal/css/print.css?m178g6");</style>
<style type="text/css" media="mobile">@import url("http://url.com/sites/all/themes/personal/css/mobile.css?m178g6");</style>
  <script type="text/javascript" src="http://url.com/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://url.com/misc/drupal.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views/js/views-contextual.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.ba-bbq.js?v=1.2.1"></script>
<script type="text/javascript" src="http://url.com/modules/overlay/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.cookie.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/lightbox2/js/lightbox.js?1332273397"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views_slideshow/js/views_slideshow.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/modules/toolbar/toolbar.js?m178g6"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"personal","theme_token":"0CkOwyp1neNP-2IbE8LYCgYGBJ9sz39ORy5DodizAGg","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"sites\/all\/modules\/views\/js\/views-contextual.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"misc\/jquery.cookie.js":1,"sites\/all\/modules\/lightbox2\/js\/lightbox.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"modules\/toolbar\/toolbar.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/lightbox2\/css\/lightbox.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/personal\/css\/style.css":1,"sites\/all\/themes\/personal\/css\/print.css":1,"sites\/all\/themes\/personal\/css\/mobile.css":1}},"lightbox2":{"rtl":0,"file_path":"\/(\w\w\/)public:\/","default_image":"\/sites\/all\/modules\/lightbox2\/images\/brokenimage.jpg","border_size":10,"font_color":"000","box_color":"fff","top_position":"","overlay_opacity":"0.8","overlay_color":"000","disable_close_click":true,"resize_sequence":0,"resize_speed":400,"fade_in_speed":400,"slide_down_speed":600,"use_alt_layout":false,"disable_resize":false,"disable_zoom":false,"force_show_nav":false,"show_caption":true,"loop_items":false,"node_link_text":"View Image Details","node_link_target":false,"image_count":"Image !current of !total","video_count":"Video !current of !total","page_count":"Page !current of !total","lite_press_x_close":"press \u003Ca href=\u0022#\u0022 onclick=\u0022hideLightbox(); return FALSE;\u0022\u003E\u003Ckbd\u003Ex\u003C\/kbd\u003E\u003C\/a\u003E to close","download_link_text":"Download Original","enable_login":false,"enable_contact":false,"keys_close":"c x 27","keys_previous":"p 37","keys_next":"n 39","keys_zoom":"z","keys_play_pause":"32","display_image_size":"","image_node_sizes":"()","trigger_lightbox_classes":"","trigger_lightbox_group_classes":"","trigger_slideshow_classes":"","trigger_lightframe_classes":"","trigger_lightframe_group_classes":"","custom_class_handler":0,"custom_trigger_classes":"","disable_for_gallery_lists":true,"disable_for_acidfree_gallery_lists":true,"enable_acidfree_videos":true,"slideshow_interval":5000,"slideshow_automatic_start":true,"slideshow_automatic_exit":true,"show_play_pause":true,"pause_on_next_click":false,"pause_on_previous_click":true,"loop_slides":false,"iframe_width":600,"iframe_height":400,"iframe_border":1,"enable_video":false},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
</head>
<body class="html not-front logged-in no-sidebars page-portfolio toolbar toolbar-drawer lightbox-processed" style="padding-top: 65px; ">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
  </div>
  <div id="overlay-disable-message" class="clearfix"><h3 class="element-invisible">Options for the administrative overlay</h3><a href="/user/1/edit?destination=portfolio#edit-overlay-control" id="overlay-profile-link" class="overlay-exclude element-invisible">If you have problems accessing administrative pages on this site, disable the overlay on your profile page.</a> <a href="/overlay/dismiss-message?destination=portfolio&amp;token=snk0Img0V_hSox1Q_-De1dEEDTtRR_v0O00J3BOSulg" id="overlay-dismiss-message" class="overlay-exclude element-invisible">Dismiss this message.</a></div><div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
  <div class="toolbar-menu clearfix">
    <ul id="toolbar-home"><li class="home first last"><a href="/" title="Home"><span class="home-link">Home</span></a></li>
</ul>    <ul id="toolbar-user"><li class="account first"><a href="/user" title="User account">Hello <strong>user</strong></a></li>
<li class="logout last"><a href="/user/logout">Log out</a></li>
</ul>    <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-11 path-admin-dashboard first"><a href="/admin/dashboard" id="toolbar-link-admin-dashboard" title="View and customize your dashboard."><span class="icon"></span>Dashboard <span class="element-invisible">(View and customize your dashboard.)</span></a></li>
<li class="menu-9 path-admin-content"><a href="/admin/content" id="toolbar-link-admin-content" title="Administer content and comments."><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></a></li>
<li class="menu-21 path-admin-structure"><a href="/admin/structure" id="toolbar-link-admin-structure" title="Administer blocks, content types, menus, etc."><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></a></li>
<li class="menu-7 path-admin-appearance"><a href="/admin/appearance" id="toolbar-link-admin-appearance" title="Select and configure your themes."><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></a></li>
<li class="menu-18 path-admin-people"><a href="/admin/people" id="toolbar-link-admin-people" title="Manage user accounts, roles, and permissions."><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></a></li>
<li class="menu-16 path-admin-modules"><a href="/admin/modules" id="toolbar-link-admin-modules" title="Extend site functionality."><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></a></li>
<li class="menu-8 path-admin-config"><a href="/admin/config" id="toolbar-link-admin-config" title="Administer settings."><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></a></li>
<li class="menu-19 path-admin-reports"><a href="/admin/reports" id="toolbar-link-admin-reports" title="View reports, updates, and errors."><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></a></li>
<li class="menu-12 path-admin-help last"><a href="/admin/help" id="toolbar-link-admin-help" title="Reference for usage, configuration, and modules."><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></a></li>
</ul>          <a href="/toolbar/toggle?destination=portfolio" title="Hide shortcuts" class="toggle toggle-active toolbar-toggle-processed">Hide shortcuts</a>      </div>

  <div class="toolbar-drawer clearfix">
    <div class="toolbar-shortcuts"><ul class="menu"><li class="first leaf"><a href="/node/add">Add content</a></li>
<li class="leaf"><a href="/admin/content">Find content</a></li>
<li class="leaf"><a href="/admin/config/development/performance">Performance</a></li>
<li class="last leaf"><a href="/admin/config/development/maintenance">Maintenance mode</a></li>
</ul></div><a href="/admin/config/user-interface/shortcut/shortcut-set-1" id="edit-shortcuts">Edit shortcuts</a>  </div>
</div>
  <!-- If front page, present front page content -->
<div id="a">
<!-- Begin other page specific content -->
<div id="smallhead">
</div>
</div><!-- End div a-->
<!-- Begin menu -->
<div id="b">
<div id="menu">
<a href="/home"><div class="item">Home</div></a>
<a href="/about"><div class="item">About Me</div></a>
<a href="/portfolio"><div class="item">Portfolio</div></a>
<a href="/photos"><div class="item">Photos</div></a>
<a href="/projects"><div class="item">Projects</div></a>
<a href="/blog"><div class="item">Blog</div></a>
</div>
</div>
<div id="c">
<div id="middle">
<!-- Begin other page specific content -->
<div id="contentwrapper">
  <div class="region region-content">
    <div id="block-system-main" class="block block-system">


  <div class="content">
    <div class="view view-portfolio-page view-id-portfolio_page view-display-id-page view-dom-id-a0c892fe2818834f0a7750c98e7e6688">



      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">

  <div>        <div><a href="/node/10">
<div class="smallbox">
<div class="nounderline">
<strong>Postcards</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Postcards<br>
Adobe Illustrator
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-2 views-row-even">

  <div>        <div><a href="/node/9">
<div class="smallbox">
<div class="nounderline">
<strong>Design</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Desiugn<br>
Adobe Illustrator
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-3 views-row-odd">

  <div>        <div><a href="/node/8">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt="screenshot"><br>
Awareness Campaign<br>
HTML, CSS
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-4 views-row-even views-row-last">

  <div>        <div><a href="/node/7">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Details Website<br>
HTML 5, CSS 3
</div>
</div></a></div>  </div>  </div>
    </div>






</div>  </div>
</div>
  </div>
</div>
<!-- End other page specific content -->
</div><!--end middle-->
</div>
<div id="d">
<div id="footer">
;<a href="">Contact Form</a>
<br>
Copyright ?2012 My Name
</div>
</div>



<div id="lightbox2-overlay" style="display: none; "></div>      <div id="lightbox" style="display: none;" class="lightbox2-orig-layout">        <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><div id="modalContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="frameContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="imageContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><img id="lightboxImage" alt=""><div id="hoverNav"><a id="prevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="nextLink" title="Next" href="#" style="padding-top: 10px; "></a></div></div><div id="loading"><a href="#" id="loadingLink"></a></div></div>        <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); ">          <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; "></a></div><a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div>        </div>      </div></body></html>

And my CSS is as follows:

我的 CSS 如下:

@charset "utf-8";
/* CSS Document */
body{
    background: black;
    font-size: 14px;
    margin: 0;
    }
a:visited{
    color: blue;
}
h2{
    font-size: 135%;
    margin: .2em 0;
}
#a{
    width: 100%;
    background: rgb(140,79,84);
}
#bighead{
    height: 31em;
    width: 69em;
    margin: 0 auto;
    padding-top: 2em;
    background: url(../img/headerpic.jpg);
    text-align: center;
    border: 0 solid black;
    border-width: 0 4px;
}
#header a{
    font-size: 35px;
    text-decoration: none;
    color: black;
}
#slogan{
    font-size: 18px;
    padding: .5em;
}
#smallhead{
    height: 14em;
    width: 69em;
    margin: 0 auto;
    background: url(../img/smallheader.jpg);
    text-align: center;
    border: 0 solid black;
    border-width: 0 4px;
}
#b{
    width: 100%;
    background: rgb(50,51,46);
}
#menu{
    width: 69em;
    height: 2.5em;
    border: 0 solid black;
    border-width: 0 4px;
    background: black;
    text-align: center;
    margin: 0 auto;
}
.item{
    font-size: 17.5px;
    height: 1.1em;
    width: 9.2em;
    float: left;
    padding: .3em 0;
    border-top: .2em solid rgb(31,38,28);
    border-bottom: .2em solid rgb(31,38,28);
}
#menu a:link, a:visited{
    text-decoration: none;
    color: #CCC;
}
#menu a:hover{
    color: white;
    background: white;
    text-decoration: underline;
}
#c{
    width: 100%;
    background: rgb(139,124,108);
}
#middle{
    min-height: 22.5em;
    width: 67.6em;
    margin: 0 auto;
    border: 0 solid black;
    border-width: 0 4px;
    background: rgb(98,103,109);
    padding: .75em;
    text-decoration: none;
}
.title{
    font-size: 2em;
    height: .5em;
    width: 24em;
    padding-left: 1em;
    padding-bottom: .25em;
    color: white;
}
.box{
    float: left;
    height: 17em;
    width: 17em;
    padding: 1em;
    padding-top: .5em;
    margin: 1.5em;
    background: rgb(49,49,51);
    color: white;
}
#contentwrapper{
}
#d{
    width: 100%;
    background: black;
}
#footer{
    height: 2.5em;
    width: 69em;
    margin: 0 auto;
    background: black;
    text-align: center;
    color: white;
}
.smallbox{
    float: left;
    height: 15em;
    width: 17em;
    padding: 1em;
    padding-top: .5em;
    margin: 1.5em;
    background: rgb(49,49,51);
    color: white;
    text-align: center;
    text-decoration: none;
}
.smallbox img{
    padding: .2em 0;
}
.nounderline{
    text-decoration: none;
}

回答by Vee

Since this was the first google result and didn't solve my issue: Check the anchor states, as it might need to be set in one of the others. (https://www.w3schools.com/css/css_pseudo_classes.asp)

由于这是第一个谷歌结果并且没有解决我的问题:检查锚点状态,因为它可能需要在其他一个中设置。( https://www.w3schools.com/css/css_pseudo_classes.asp)

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}

回答by jsheffers

To apply just to this view add:

要仅应用于此视图,请添加:

.view-portfolio-page .views-row a { text-decoration: none; }

To apply to all views add:

要应用于所有视图,请添加:

 .views-row a { text-decoration: none; }

http://jsfiddle.net/D8kRE/

http://jsfiddle.net/D8kRE/

You were applying text-decoration: none to a div which has no effect. You can only apply that to an anchor tag which in your case is located at .views-row a. You can get more specific and apply this to only the portfolio page view by using the code I've put above.

您正在将 text-decoration: none 应用于没有效果的 div 。您只能将其应用于在您的情况下位于 .views-row a 的锚标记。您可以使用我在上面放置的代码获得更具体的信息并将其仅应用于投资组合页面视图。

回答by Rage

Instead of font-decoration: none; try the css text-decoration: none;

而不是font-decoration: none; 试试csstext-decoration: none;

回答by CheckeredMichael

As this hasn't actually got a definitive answer yet and it's fairly high up on Google searches. I thought I would chip in with my answer.

由于这实际上还没有得到明确的答案,而且它在 Google 搜索中的排名相当高。我以为我会回答我的问题。

I just had a similar problem where I couldn't pinpoint why I wasn't able to get rid of the underline and found out that it was because I didn't specify the hover state.

我只是有一个类似的问题,我无法确定为什么我无法摆脱下划线并发现这是因为我没有指定悬停状态。

So try out

所以试试

#header a:hover {
    text-decoration: none;
}

And that should work. I know this was posted ages ago, but I have seen that you haven't accepted an answer and didn't post whether you sorted it or not. So hopefully my input will help someone along the way and hopefully you can see this and finally accept an answer or make your own.

这应该有效。我知道这是很久以前发布的,但我看到您没有接受答案并且没有发布无论您是否对其进行排序。所以希望我的意见能帮助别人,希望你能看到这一点并最终接受答案或做出自己的答案。

回答by Smokva

I know this is old, but this came upon my search as well. So I thought I'd share.

我知道这很旧,但这也出现在我的搜索中。所以我想我会分享。

I had a similar problem. I created a regular nav and setting the text-decoration to none worked fine.

我有一个类似的问题。我创建了一个常规导航并将 text-decoration 设置为 none 工作正常。

Then I had to amend my css to create a hamburger menu effect for smaller viewports. And although I used the exact same css, the underline appeared and nothing I did would make it go away. I know it has something to do with the toggle:checked & ~.mainNavfeature under which my nav needed to be placed, but I couldn't figure out why and how to get around it.

然后我不得不修改我的 css 来为较小的视口创建一个汉堡菜单效果。虽然我使用了完全相同的 css,但下划线出现了,我所做的任何事情都不会让它消失。我知道这与toggle:checked & ~.mainNav需要放置导航的功能有关,但我不知道为什么以及如何绕过它。

In any case, the one thing that DID work was going into my reset, and adding a default: a {text-decoration: none}

无论如何,DID 工作的一件事是进入我的重置,并添加默认值: a {text-decoration: none}

Don't know why it worked, but it did. Hope this helps someone.

不知道为什么它有效,但它确实有效。希望这可以帮助某人。

回答by maged adel

try to add !important

尝试添加 !important

text-decoration: none !important;

text-decoration: none !important;

回答by unknown

If you are refering to the underline on the text, remember to set the text-decoration property to none on the ELEMENT. E.g.

如果您要引用文本上的下划线,请记住将 ELEMENT 上的 text-decoration 属性设置为 none。例如

<html>
<head></head>
<body>
    <div>
        <a href="www.google.com" style="text-decoration: none"> Google</a>
    </div>
</body>

Edit:Note, it is bad to use styling in-line with elements, I used it, just to demonstrate a solution.

编辑:注意,使用与元素一致的样式是不好的,我使用它只是为了演示解决方案。

回答by Joeri

text-decoration works on anchor, it's correct name would be: anchor-decoration-for-text.

文本装饰适用于锚点,正确的名称是:anchor-decoration-for-text。