一个导航的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
嗯。。是优先级别的问题，谢谢了
嗯。。是优先级别的问题，谢谢了
那就结帖，给分吧、、、
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
