一个导航的CSS问题_html/css_WEB-ITnose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">#nav {list-style-type: none;}#nav li {float: left;}#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}#nav li a:hover {background-color: #FF0000;}#nav li a#current {background-color: #00FF00;}</style></head><body><ul id="nav"> <li><a id="current" href="#">百度</a></li> <li><a href="#">百度</a></li> <li><a href="#">新浪</a></li></ul></body></html>这样的一个导航，为什么我把#nav li a#current {background-color: #00FF00;}这段改写成#current {background-color: #00FF00;}这样就没有效果？
http://www.w3cn.org/article/translate/2005/104.html这里有CSS的技巧，里面有说到
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
为什么我把#nav li a#current {background-color: #00FF00;}这段改写成#current {background-color: #00FF00;}这样就没有效果？
回复讨论(解决方案)
调试了一下，结果是
当写法是#current {background-color: #00FF00;}的时候，则
#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}
样式里面的background-color属性，覆盖了，#current样式里的属性设置。
当写法是#nav li a#current {background-color: #00FF00;}的时候，则是
#nav li a#current这个样式，覆盖了，#nav li a样式里的属性值。
具体是什么原因会这样，不清楚呀。
等待大神，回复。
看着可能是跟，浏览器加载样式的，先后顺序有关。
调试了一下，结果是
当写法是#current {background-color: #00FF00;}的时候，则
#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}
样式里面的background-color属性，覆盖了，#current样式里的属性设置。
当写法是#nav li a#current {background-color: #00FF00;}的时候，则是
#nav li a#current这个样式，覆盖了，#nav li a样式里的属性值。
具体是什么原因会这样，不清楚呀。
等待大神，回复。
按优先级别来讲，应该#current是最高级的吧，怎么它的属性会被覆盖呢？
我看浏览器的顺序是这样的：
element.sytle{ }
#nav li a#current
#nav li a
#current
嗯。。是优先级别的问题，谢谢了
嗯。。是优先级别的问题，谢谢了
那就结帖，给分吧、、、
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
