一些CSS代碼不作業-有解無憂

我不知道為什么有些代碼在 CSS 上不起作用，不確定我做錯了什么。
這是 html index.html ，它包含所有需要的內容，styles.css 的 url 是正確的

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Test</title>
</head>
<body>
<nav class="nav-main">
    <div class="nav-logo">
        <h2>My Site</h2>
    </div>
    <div class="nav-links">
        <ul id="nav-links">
            <li><a href="#homeid">Home</a></li>
            <li><a href="#homeid">Explore</a></li>
            <li><a href="#homeid">About Us</a></li>
            <li><a href="#homeid"><button>Sign Up</button></a></li>
        </ul>
    </div>
  </nav>
  <div class="header-main">....`

這是 css，我無法更改顏色或大小，甚至無法洗掉NAV LINKS上的文本裝飾，不知道為什么嘗試從 id 更改為 class 但這樣做甚至命令 display:inline; 不起作用。

.body {
        background-color: lightblue;
      }

    .nav-main {
        background-color: black ;
        color: white;
        margin: 0em -0.4em 0em -0.4em;
        display: flex;
        justify-content: space-between;
        padding-left: 1em;
        padding-top: 0%;
     }

    .nav-logo {
        color: red;
        size-adjust: 3em;
    }
  
    #nav-links li {
        list-style-type: none;
        font-size: 1.3em;
        display: inline;
        margin-right: 1.0em;
        **color: red;**
        **size-adjust: 3em;**
        **text-decoration: none;**
        }

uj5u.com熱心網友回復：

您需要定位錨元素而不是 li。

#nav-links li {
  list-style-type: none;
  font-size: 1.3em;
  display: inline;
  margin-right: 1.0em;
}

#nav-links li a {
  color: red;
  text-decoration: none;
}

<ul id="nav-links">
  <li><a href="#homeid">Home</a></li>
  <li><a href="#homeid">Explore</a></li>
  <li><a href="#homeid">About Us</a></li>
  <li><a href="#homeid"><button>Sign Up</button></a></li>
</ul>

uj5u.com熱心網友回復：

.nav-logo ul li{
    
list-style-type: none;        
font-size: 1.3em;         
display: inline;        
margin-right: 1.0em;
color: red;
size-adjust: 3em;
text-decoration: none;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330102.html

標籤：html css

上一篇：如何將類應用于下拉選單中單擊的元素？

下一篇：Flexbox使列等高