天道酬勤,学无止境

My Navigation Bar CSS is overwriting my other links CSS on Opera

The way I have styled my navigation bar follows as:

nav a:link,a:visited {
    display:block;
    width: 125px;
    color:#000000;
    background-color:#FFFFFF;
    text-decoration:none;
    font-family: Arial,Helvetica,sans-serif;
    font-variant:small-caps;
    padding: 5px;
    font-size: 18px;
}

The rest of my links are styled as this:

footer a:link {
    color:#7A7A7A;
}

footer a:visited {
    color:#7A7A7A;
} 

footer a:hover {
    color:#383838;
}   

footer a:active {
    color:#000000;
} 

The problem is that Opera cannot recognize the #nav or #footer before the a:link,a:visited and as such, every link on my page looks like the navigation bar in Opera. Can anyone think of a fix for this?

HTML

<ul id="nav">
    <li>
        <a href="#home">Home</a>
    </li>

    <li>
        <a href="#news">About Us</a>
    </li>

    <li>
        <a href="#contact">Portfolio</a>
    </li>

    <li>
        <a href="#about">Services</a>
    </li>

    <li>
        <a href="#about">Contact Us</a>
    </li>
</ul>

And this is the HTML that is being overwritten:

<div id="footer">
    Copyright 2013, <a href="http:">Link 1 </a> and <a href="http:">Link 2 </a>
</div>
标签

评论

Your second selector for the navigation links isn't quite correct, should be:

nav a:link,
nav a:visited {
    // styles
}

instead of just nav a:link, a:visited, like this the styles get applied to each visited anchor.

Also like mentioned in other answers, since you've posted your HTML, you must select indexed (id) elements with #nav or #footer.

You're trying to target an ID, your CSS selectors should be #nav and #footer

e.g.

#footer {
  blah
}
#nav {
  blah
}

As mentioned in Simons answer, it is the second selector that's need nav added like nav a:visited instead of a:visited.

Here is a working example (tested in Opera 12 and Chrome 26 on Win7)

Also a changed from nav to #nav (same for footer) to get it to work with your html

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 显示:inline-block 不适用于 safari(Display:inline-block not working on safari)
    问题 我在菜单问题上一直在我的朋友网站上停留。 网站网址为:colorfil.webd.pl/sandbox/sylwia/ 请查看菜单(主导航 + 右上角菜单 + 文件管理器菜单)。 在所有现代浏览器上:chrome、FF、opera 菜单看起来都不错。 在 Safari 上它很糟糕。 我使用这个简单的 css(用于主导航): #header-container li { display:inline-block; margin:0 1em; } 问题 - 菜单被扩展到总页面宽度(因此菜单项之间的差距很大)。 你能就此给我一些建议吗? 回答1 调试 如果将来发生类似的事情,您需要对其进行调试。 所有现代浏览器都具有内置的 Web Inspector/Developer Tools(如果它们对您来说不够好 - 您可以随时使用 Firebug)。 如果网站在 X 浏览器中看起来不同,您需要做的就是检查外观不同的元素,然后查看应用了哪些 CSS 规则。 差异几乎总是与应用的不同规则有关。 如果您无法跟踪 CSS 文件中的现有规则,它们很可能是通过 JavaScript 添加的。 我已经为您的案例录制了一个快速 gif,请注意从链接中删除浮动和最小宽度后一切都很好(如 Imube 之前所述)。 您实际上并不需要浮点数,因为inline-block可以正常工作。 我通常建议尽可能避免浮动。
  • 如何均匀地获得任意数量的空间链接?(How do I get any number of links to space evenly?)
    问题 好吧,情况就是这样…… 假设我有一个网站导航栏,我允许用户更改他们想要在此导航栏上的链接数量。 这意味着他们可以有 3、5、10 等。 我想要做的是,如果一个链接启动,它只占用导航栏上 1/5 的空间。 如果我不使用边框,我可能会执行以下操作: 宽度:18%; 填充:0 1%; 但是,我有两个问题: 1)对于 4 个按钮,它不会填满整行。 如果链接太宽,看起来会很丑……但是当我有 6 或 7 个按钮时,它就会溢出! 2)由于我有边框,我不能为边框或宽度使用百分比值,因为我无法正确估计它将是多少百分比。 现在,我知道我不必使用百分比值,但我更希望第一个按钮是所有其他按钮正确适应所需的最小尺寸,这意味着如果我有 950 像素和 6 个链接,第一个链接可以是大约 150 像素,而其他链接是 160 像素……这很好。 我希望导航栏上的所有其他按钮大小相同,无论有多少链接。 我还需要它接受边框...我认为这样做的方法是在嵌套的 div 中放置一个边框,这样它就不会影响按钮的整体宽度? 这一切都很好,但如果我无法让所有导航按钮正确适应宽度,我仍然无法使用我想要的样式设计动态站点的问题。 有一些我可以使用的js技巧吗? 我也不知道... 谢谢 编辑:这是我的演示小提琴 回答1 一个纯 CSS 解决方案,基于链接的对齐方式,但仍作为语义列表项: 请参阅演示小提琴。 在 IE7、IE8、IE9
  • JavaScript dropdown menu - parts disappearing on a Mac?
    My website has various pages and every page has a duplicated navigation menu along the top. This works fine on every browser on a PC. However, when on a Mac in safari or iPad, it works only on some pages. When on portraits page, the text from the drop down menu 'Info' disappears, as does the text from the client area drop down menu. These menu's work fine on all other pages, and the code is exactly the same, I copy and pasted it so I really don't understand why this can happen. The links still work, if you click in the blank space it takes you to the link, but you can't actually see what you
  • 具有重叠滑块/轮播和 Bootstrap 导航的两个背景(Two backgrounds with overlapping slider/carousel and navigation with Bootstrap)
    问题
  • Scrolling problems on a web page with fixed header and footer in iOS7
    This will be difficult for me to explain, but I'll try: As a start, my web page is working on mobilebrowser in iOS6.x, Android, W7 and desktop browser IE9, Safari and Chrome. The problem happens in Apple's mobile Safari browser in iOS7. I had a problem with a sticky footer and the virtual keyboard, but that got solved here Now I've a problem when scrolling on the page. When scrolling down, normally the navigation bar will hide and the address bar will shrink on iOS7. This doesn't happens. The content between the fixed header and footer is scrolling, but the bottom of the content is overlapped
  • 如何阻止 Opera 缓存页面?(How do I stop Opera from caching a page?)
    问题 我试图让 Opera 每次重新请求一个页面,而不是仅仅从缓存中提供它。 我正在发送 'Cache-control: no-cache' 和 'Pragma: no-cache' 响应标头,但似乎 Opera 只是忽略了这些标头。 它适用于其他浏览器 - Chrome、IE、Firefox。 如何阻止 Opera 缓存页面? 我希望能够在用户单击浏览器上的“后退”按钮时让 Opera 重新请求页面。 回答1 作为用户,我绝对讨厌在我使用后退按钮时强制重新加载减慢我的历史导航速度的页面。 (如果您每天使用的浏览器关注各种缓存指令,并让它们以您希望作为开发人员的方式影响历史导航,您可能会注意到某些网站自己变慢了......) 如果你有一个非常强大的用例来做这件事,我会说你的架构在某种意义上可能是“错误的”——例如,如果你在不断更新数据的不同“视图”之间切换,因此想要强制执行重新-当用户返回时加载也许使用 Ajaxy 技术将不断变化的数据加载到当前页面会更好? Opera 的实现是有目的的——“缓存”在概念上被视为与“历史导航”不同,前者更多地是在磁盘上和会话之间存储东西,后者是切换回你刚刚访问的临时隐藏页面,处于状态你离开了它。 但是,如果您真的、真的需要它,则此策略中存在一个漏洞,可以启用您想要的行为。 发送“ Cache-control: must-revalidate
  • 覆盖子function.php WordPress中的父函数(Overwrite parent functions in child function.php WordPress)
    问题 我正在使用儿童主题。 这是父函数 function aaron_customize_css() { echo '<style type="text/css">'; if ( is_admin_bar_showing() ) { ?> .main-navigation{top:32px;} @media screen and ( max-width: 782px ) { .main-navigation{top:46px;} } @media screen and ( max-width: 600px ) { .main-navigation{top:0px;} } <?php } echo '.site-title{color:#' . get_header_textcolor() . ';} '; $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?> .site-header { background: <?php esc_attr_e( get_theme_mod('aaron_header_bgcolor', '#fafafa') ) ?> url(<?php header_image(); ?>) <?php esc_attr_e( get_theme_mod('aaron
  • Overwrite parent functions in child function.php WordPress
    I'm using a child theme. Here's the parent function function aaron_customize_css() { echo '<style type="text/css">'; if ( is_admin_bar_showing() ) { ?> .main-navigation{top:32px;} @media screen and ( max-width: 782px ) { .main-navigation{top:46px;} } @media screen and ( max-width: 600px ) { .main-navigation{top:0px;} } <?php } echo '.site-title{color:#' . get_header_textcolor() . ';} '; $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?> .site-header { background: <?php esc_attr_e( get_theme_mod('aaron_header_bgcolor', '#fafafa') ) ?> url(<?php header_image(); ?>) <?php
  • 在 iOS7 中固定页眉和页脚的网页上的滚动问题(Scrolling problems on a web page with fixed header and footer in iOS7)
    问题 这对我来说很难解释,但我会尝试:首先,我的网页在 iOS6.x、Android、W7 和桌面浏览器 IE9、Safari 和 Chrome 中的移动浏览器上运行。 问题发生在 iOS7 的 Apple 移动 Safari 浏览器中。 我遇到了粘性页脚和虚拟键盘的问题,但在这里得到了解决 现在我在页面上滚动时遇到问题。 向下滚动时,通常导航栏会隐藏,地址栏会在 iOS7 上缩小。 这不会发生。 固定页眉和页脚之间的内容是滚动的,但内容的底部与页脚和导航栏重叠。 我必须等待滚动停止才能再次向下滚动。 然后地址栏会缩小,导航栏会隐藏,底部的内容会显示。 当我在页面底部并想向上滚动时,同样的事情发生,只是向上:滚动到顶部,标题和微小的地址栏与上部内容重叠,等待滚动停止,然后再次滚动以扩展地址栏、显示导航栏和显示上部内容。 希望这张图片可以帮助: 下面是一些css代码: * { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } html, body { height: 100%; margin: 0; } body{ font-family: Helvetica, Segoe UI, Arial, Sans-Serif; font-size: 130%; background-image: url(
  • CSS中的tabindex(tabindex in CSS)
    问题 是否可以使用 CSS 控制 tabindex,如果是,哪些浏览器支持它以及哪些元素? 编辑 我应该说,我的目标是在 div 上捕获 keydown 事件。 我看到这个页面 http://www.quirksmode.org/js/events/keys.html# 测试键盘事件,它表明 keydown 触发除文档和正文或某种表单元素或链接以外的任何东西的唯一方法是在其上声明 tabindex 。 但我在 W3C 网站上读到: 以下元素支持 tabindex 属性:A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA。 所以我有点困惑,该怎么做才能符合标准并使我的用例工作? 编辑2 我的整个用例是一个包含大量内容和人工滚动条的 div。 我可以用鼠标事件滚动它,但到目前为止键盘没有运气。 回答1 2017 年更新 正如@Wallop 在评论中指出的那样,由于“缺乏实现兴趣”, nav-index属性在 2015 年从规范中删除。 看看 W3C 在 CSS3-UI 中引入的nav-index属性。 此属性与tabindex具有完全相同的行为,并且适用于任何元素。 'nav-index' 属性是一种指定顺序导航顺序(也称为“跳位顺序”)的输入方法中立方式。 此属性是 HTML4/XHTML1 属性“tabindex”的替代品
  • 使用 Opera 在 JavaScript 中更新图像源(Image source update in JavaScript with Opera)
    问题
  • Using bootstrap navigation bar and would like to center the links using css
    I am using the bootstrap navigation bar and I have my links in the nav. The links default to the left. The only way I am able to move the links to the center of the page is by making the css give the first list item a margin of 20em. I would like to have it adjust for different size monitors however so in the event the monitor is larger it will still be centered. Here is the portion of the bootstrap nav code with my links and the css below it: <nav class="navbar navbar-default"> <!--<div class="container">--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed"
  • Navigation bar messing with other elments in CSS
    Hi there i had a nav bar which was working perfectly. Then i added a lightbox effect. Both work perfectly however in my css they are messing up. When i added some css to lightbox effects to the div it messes up my navigation bar. I think its something to do with the a tag. My code is below Html: <div id="nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">Regsiter</a></li> <li><a href="#contact">Rules</a></li> <li><a href="#about">Photo's</a></li> <li><a href="#about">Contact Us</a></li> </ul> </div> <div class = "lightbox"> <a href="images/image1.jpg" rel="lightbox[group]"><img
  • 使用引导导航栏并希望使用 css 将链接居中(Using bootstrap navigation bar and would like to center the links using css)
    问题 我正在使用引导程序导航栏,并且在导航中有我的链接。 链接默认在左边。 我能够将链接移动到页面中心的唯一方法是让 css 为第一个列表项提供 20em 的边距。 我想让它针对不同尺寸的显示器进行调整,但是如果显示器更大,它仍然会居中。 这是引导程序导航代码的一部分,其中包含我的链接和其下方的 css: <nav class="navbar navbar-default"> <!--<div class="container">--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Chompsta</a> </div> <!--
  • 导航栏与 CSS 中的其他元素混淆(Navigation bar messing with other elments in CSS)
    问题 嗨,我有一个完美运行的导航栏。 然后我添加了一个灯箱效果。 两者都可以完美运行,但是在我的 css 中它们搞砸了。 当我向 div 添加一些 css 到灯箱效果时,它会弄乱我的导航栏。 我认为这与a标签有关。 我的代码在下面 网址: <div id="nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">Regsiter</a></li> <li><a href="#contact">Rules</a></li> <li><a href="#about">Photo's</a></li> <li><a href="#about">Contact Us</a></li> </ul> </div> <div class = "lightbox"> <a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a> <a href="images/image2.jpg" rel="lightbox[group]"><img src="images/image2t.jpg" /></a> <a href="images/image3.jpg" rel="lightbox[group]"><img src=
  • 帮助定位搜索栏(help positioning the search bar)
    问题 我的导航栏使用无序链接并使用 jquery 实现 ui 效果。 这工作正常。 现在我设计了一个搜索栏,它与栏的主题相匹配,并希望将其放置在导航栏的右侧。 有点像 vimeo 网站.. 问题是我不能将它包含在同一个列表中,因为我不希望将 jquery 效果应用于搜索栏。 我如何将它放置在导航栏的右侧? 这是我尝试过但不起作用的 css .search{ background-image:url('search.jpg'); margin-top:inherit; margin-left:inherit; width:200px; height:40px; } 这是 html <div class="search"> <input type="text" id="searchField" /> <img src="go.jpg" alt="Search" onclick="alert('You clicked on search button')" /></div> 回答1 有几个选项 最佳选项取决于您的整个布局。 下面是水平导航列表和搜索的两个基本 CSS 实现。 HTML <div id="Navigation"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#"
  • 2021-03-12
    ZooKeeper 图片灯箱插件之lightBox 图片放大镜插件之jqzoom 表单验证插件之validate jQuery 强大的jQuery弹出层插件–BlockUI https://blog.csdn.net/ATFWUS/article/details/106157480 jQuery UI 常用插件:   1.dialog插件   2.tabs插件   3.menu插件   4.autocomplete插件   5.lazyload插件: WebBrowser 如何记录自己访问过的网站? https://www.jianshu.com/ css heightcss line-heightcss widthcss min-widthcss max-widthcss min-heightcss max-heightcss bordercss backgroundcss floatcss clearcss displaycss fontcss text-transformcss英文首字母大写css font-variantcss font-weightcss font-stylecss text-decorationcss 删除线div css 虚线css 注释html 注释css paddingcss margincss 文本css font-sizecss font
  • Java WEB 八
    CSS 九、CSS实例【续】 12、CSS 分组 和 嵌套 选择器 Ⅰ、分组选择器 在样式表中有很多具有相同样式的元素。 h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码,你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中,我们对以上代码使用分组选择器: 举例: h1,h2,p{ color:green; } Ⅱ、嵌套选择器 它可能适用于选择器内部的选择器的样式。 在下面的例子设置了四个样式: p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class=“marked” 的元素指定一个样式。.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。 举例: p{ color:blue; text-align:center; } .marked{ background-color:red; } .marked p{ color:white; } p.marked{ text-decoration:underline; } 13、CSS 尺寸 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距
  • header.php | 更改搜索位置(header.php | Change position of search)
    问题 我怎样才能让搜索进入storefront_primary_navigation和storefront_header_cart之间的标题的第二行?? 使用下面的 PHP 代码。 如果我在 CSS 中进行这些更改,它在移动设备上看起来很难看。 那么这可以在 PHP 中完成吗? 如果是,我应该在哪个文件中进行更改,有哪些更改? 现在我在标题中有两行: 第一行:标志 | secondary_navigation | 产品搜索第二行:primary_navigation | header_cart 现在标题看起来像: PHP: <header id="masthead" class="site-header" role="banner" <?php if ( get_header_image() != '' ) { echo 'style="background-image: url(' . esc_url( get_header_image() ) . ');"'; } ?>> <div class="col-full"> <?php /** * @hooked storefront_skip_links - 0 * @hooked storefront_social_icons - 5 * @hooked storefront_site_branding - 10 *
  • 自定义Bootstrap CSS模板(Customizing Bootstrap CSS template)
    问题 我刚刚开始使用Twitter的Bootstrap,并且想知道定制的“最佳实践”是什么。 我想开发一种系统,该系统将利用css模板(Bootstrap或其他)的所有功能,完全(轻松)可修改,具有可持续性(即–从Twitter发布下一版Bootstrap时,我不会)不必重新开始。 例如,我想将背景图像添加到顶部导航中。 看来有3种方法可以解决此问题: 修改bootstrap.css中的.topbar类。 我不是特别喜欢这个,因为我会有很多.topbar项,并且我不一定要用相同的方式进行修改。 用我的背景图像创建新类,然后应用两种样式(新样式和引导样式应用于我的元素)。 这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中,然后仅使用未由我的自定义类踩下的片段来避免。 再次,这需要比我认为必要的工作更多的工作,并且尽管它很灵活,但是它不允许我在Twitter发布下一部分时轻松更新bootstrap.css。 使用.LESS中的变量来实现自定义。 副手这似乎是一个不错的方法,但是没有使用过。除非我担心在客户端上编译css和代码的可持续性。 尽管我使用的是Bootstrap,但是这个问题可以推广到任何CSS模板。 在此先感谢您的输入。 回答1 最好的办法是。 1.从github派生twitter-bootstrap并在本地克隆。 他们正在迅速地改变库/框架