CSS：无论如何都无法编辑链接

Question

CSS 确实是一种可爱的语言。我正在尝试创建我的第一个登录页面作为个人项目，但现在我无法尝试编辑锚点 tags/hyperlinks。这里的问题是，无论我做什么，我都无法删除项目符号点（列表样式）、更改字体颜色（颜色）、将文本更改为内联（显示）然后删除下划线（文本装饰） ).

HTML:


<!DOCTYPE html>

<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">
   <title>Landing Page</title>


   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Luxurious+Script&family=Roboto:wght@100&family=The+Nautigal&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<nav class="navbar">

<label class="logo">Placeholder</label>

<ul id="links"> 

<li><a href="landingpage.html">Link one</a></li>
<li><a href="landingpage.html">Link two</a></li>
<li><a href="landingpage.html">Link three</a></li>

</ul>

</nav>

</header>


   
</body>

</html>

CSS:

body {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


nav {

    background: #1f2937;
    height: 70px;
    width: 100%;
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
    
    
}

.logo {
  
    font-size: 2.5rem;
    font-family: Luxurious Roman; 
  
}

nav ul li a  {

    color: white;
    list-style: none ;
    text-decoration: none;
    background-color: royalblue;
    display: inline;
}

Answer 1

我已经创建了 HTML 和 CSS 文件来测试你的文件，基本上这里的问题是你的 css 指令，我可以帮助你，首先总之，如果您想修改列表以删除项目符号点，您必须首先正确使用 css 选择器：

当前一个：

nav ul li a  {

    color: white;
    list-style: none ;
    text-decoration: none;
    background-color: royalblue;
    display: inline;
}

但是选择器正在选择 a 标签，所以如果您想删除列表中的项目符号点，您可以使用如下内容：

nav ul {
    
  list-style-type: none;
}

我将把这些链接放在这里，因为它们在我学习时对我有帮助：

https://web.dev/learn/css/

https://www.w3schools.com/css/

Answer 2

您没有将 css 属性与 html 元素一起使用，这是您应该如何做的：

nav ul li{
  list-style: none;
  display: inline;
}
nav ul li a  {
    color: red;
    text-decoration: none; 
}

list-style 属性应应用于 <li> 个元素，color and text-decoration 应应用于 <a> 个元素。

Answer 3

我们知道flex，让元素的children在一列，
所以元素将是一个对另一个
而不是另一个...

所以你让导航弯曲，但是导航
直接child人只有1.<label>和2.<ul>

我们需要像 child 这样的

元素，所以我把 flex 也放在 <ul> 中

    nav,
    ul {
      display: flex;
    }

并将 list-style-type 添加到 none（在 <ul> 中），因此列表前不再有项目符号

nav ul {
    list-style-type: none;
    gap: 10px;
}

还添加了一个 gap，就像边距一样（之所以有效，是因为 <ul>

中有 flex

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background: #1f2937;
  height: 70px;
  width: 100%;
  color: white;
  padding-top: 20px;
  padding-bottom: 10px;
}

.logo {
  font-size: 2.5rem;
  font-family: Luxurious Roman;
}

nav ul li a {
  color: white;
  list-style: none;
  text-decoration: none;
  /* background-color: royalblue; */
  display: inline;
}

nav,
ul {
  display: flex;
}

nav ul {
  list-style-type: none;
  gap: 10px;
}

<!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="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Luxurious+Script&family=Roboto:wght@100&family=The+Nautigal&display=swap" rel="stylesheet">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <!-- navbar -->
    <nav class="navbar">
      <!-- logo -->
      <label class="logo">Placeholder</label>
      <!-- links -->
      <ul id="links">
        <!-- 1 -->
        <li>
          <a href="landingpage.html">Link one</a>
        </li>
        <!-- 2 -->
        <li>
          <a href="landingpage.html">Link two</a>
        </li>
        <!-- 3 -->
        <li>
          <a href="landingpage.html">Link three</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>

CSS：无论如何都无法编辑链接

CSS: Can't edit links no matter what

html

css

anchor

hyperlink

css-selectors