简体   繁体   English

使用CSS为特定标签(页眉,导航,文章,页脚)中的链接设置样式,而无需使用类或ID?

[英]Using CSS to style links within specific tags (header, nav, article, footer) without classes or id's?

I am trying to style some links in my navbar. 我正在尝试在导航栏中设置一些链接的样式。 Since I am using html5, I have placed the links within the standard <nav> and then a <ul> and then <li> tag. 由于我使用的是html5,因此已将链接放置在标准<nav> ,然后放置了<ul><li>标记。 How would I style only the links within the <nav> <ul> <li> tags (I'm guessing with pseudo classes)? 我该如何设置<nav> <ul> <li>标记内的链接的样式(我在猜测伪类)?

I have thought of the following but to no avail: 我想到以下内容,但无济于事:

nav ul li a:link, a:visited {}
nav a:link, a:visited {}

I know that I could be using classes and id's but I wanted to know if I could do it without them since I will probably only have one <nav> tag in the whole page with an unordered list inside of it. 我知道我可能正在使用类和id,但是我想知道是否可以在没有它们的情况下使用它,因为我可能在整个页面中只有一个<nav>标签,并且其中没有无序列表。 If you could let me know if it is possible without using classes and id's that would be great. 如果您可以让我知道不使用类和id的情况是否可行,那就太好了。

http://jsfiddle.net/S9RG8/ Here's a JS fiddle showing a working example of how to select all of the pseudo elements of an anchor within a ul within a nav tag. http://jsfiddle.net/S9RG8/这是一个JS提琴,显示了如何在nav标签内的ul中选择锚的所有伪元素的有效示例。

This should work for you, but if not you may want to include an HTML5 shiv in your header to ensure that the browser you're working with supports HTML5 elements. 这应该适合您,但如果不是,则可能需要在标头中包含HTML5 shiv,以确保您使用的浏览器支持HTML5元素。 code.google.com/p/html5shiv/ code.google.com/p/html5shiv/

Hope this helps 希望这可以帮助

Maybe just use a to style the link as a whole. 也许只是使用a来对链接进行整体样式设置。 Now you got no styling if this link is active or hovered. 现在,如果此链接处于活动状态或悬停状态,您将没有样式。 After that you can add specific styles for visited or hovered links. 之后,您可以为访问或悬停的链接添加特定的样式。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用HTML5标签有什么好处 <article> , <section> , <figure> , <header> , <footer> , <nav> ? - What is the benefit of using HTML5 tags like <article>, <section>, <figure>, <header>, <footer>, <nav>? HTML5语义标签(文章,页脚,标题)的降级问题 - Degradation issues for HTML5 semantic tags (article, footer, header) CodedUI GetChildren()不返回带有HEADER,SECTION,ARTICLE,NAV等HTML5标签的子级 - CodedUI GetChildren() doesn't return children with HTML5 tags like HEADER, SECTION, ARTICLE, NAV 使用CSS将HTML表格样式化为带有单独的页眉和页脚文件的页面正文 - Style HTML Table into Body of Page with Separate Header and Footer files using CSS 在引擎盖下,HTML5标签(文章,部分,旁边,页眉,页脚)是否像div一样实现? - Under the hood, are HTML5 tags (article, section, aside, header, footer) implemented just like div? HTML5:页脚,页眉和文章 - HTML5: Sticky footer, header and article IE10不在JSFiddle之外的HTML5的header / footer / nav / main元素上应用CSS样式。 HTML5怪癖模式触发了吗? - IE10 not applying CSS styles on HTML5's header/footer/nav/main elements outside of JSFiddle. HTML5 quirks mode triggering? 是否正确包装 <header> 和 <nav> 标签 - Is correct wrapping <header> and <nav> tags 将CSS3样式应用于特定ID - applying css3 style to specific id 具有侧面导航和内容区域的CSS3 / HTML5粘性页眉/页脚 - CSS3/HTML5 Sticky Header/Footer With Side Nav and Content Area
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM