為什么我的導航欄文本沒有隨 CSS 改變顏色？
[英]Why isn't my navbar text changing color with CSS?
問題描述
使用以下 HTML 和 CSS 我似乎無法將超鏈接的文本顏色更改為藍色或紫色？ 我錯過了什么？
nav ul { /* Navbar unordered */ list-style: none; text-align: center; background-color: #495e57; border-radius: 10px; } nav li { /* Navbar ordered */ display: inline-block; padding: 20px; font-size: 1.5rem; border-radius: 10px; } nav li:hover { /* Navbar on mouse hover */ background-color: #1f2926; color: white; }
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="book.html">Book</a></li> <li><a href="about.html">About</a></li> </ul> </nav>
我試過使用 of.important 無濟於事：我發現唯一成功的方法是將它包裝在 HTML 代碼本身中，如下所示：
<li><a style="color: white" href="index.html">Home</a></li>
2 個解決方案
解決方案1
2 2022-11-22 14:43:39
另一個想法是將a標簽的color屬性設置為inherit ，以便它繼承其父li屬性的計算顏色：
nav ul { /* Navbar unordered */ list-style: none; text-align: center; background-color: #495e57; border-radius: 10px; } nav li { /* Navbar ordered */ /* set default color to blue, so that anchor tags inherit this */ color: blue; display: inline-block; padding: 20px; font-size: 1.5rem; border-radius: 10px; } nav li:hover { /* Navbar on mouse hover */ background-color: #1f2926; color: white; } nav a { /* anchor tags should inherit color of parent */ color: inherit; }
<body> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="book.html">Book</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </body>
解決方案2
0 已采納 2022-11-22 14:36:28
您將顏色設置為li而不是a 。
a元素有一個默認顏色，所以你需要 select 它。
a {
color: white;
}
nav ul { list-style: none; text-align: center; background-color: #495e57; border-radius: 10px; } nav li { display: inline-block; padding: 20px; font-size: 1.5rem; border-radius: 10px; } nav li:hover { background-color: #1f2926; } a { color: white; }
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="book.html">Book</a></li> <li><a href="about.html">About</a></li> </ul> </nav>
或撥打 ( li ) hover：
nav li:hover a {
color: white;
}
nav ul { list-style: none; text-align: center; background-color: #495e57; border-radius: 10px; } nav li { display: inline-block; padding: 20px; font-size: 1.5rem; border-radius: 10px; } nav li:hover { background-color: #1f2926; } nav li:hover a { color: white; }
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="book.html">Book</a></li> <li><a href="about.html">About</a></li> </ul> </nav>
為什么我的文本不更改為我輸入的顏色代碼？ （它保持藍色）
[英]Why isn't my text changing to the color code I put in? (It stays blue)
為什么我的字體從 CSS 應用於 HTML 但顏色和文字裝飾卻沒有？
[英]Why is my font being applied to HTML from CSS but color and text decoration isn't?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.