Javascript 我能'；我无法更改导航栏中文本的颜色_Javascript_Html_Jquery_Css

Javascript 我能'；我无法更改导航栏中文本的颜色

javascript html jquery css

Javascript 我能'；我无法更改导航栏中文本的颜色,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我正在为一个类制作一个简单的网页，它以滑块格式显示图像。我在页面顶部创建了一个导航栏，链接到不同的页面。通常，导航栏中的文本为白色，但由于某些原因，它仍保持紫色。我就是不能让它变回白色。我很抱歉，如果这是愚蠢的，我不擅长这个。以下是我到目前为止的情况： <!DOCTYPE html> <html lang="en"> <head> <title>Cheese</title> <link rel="

我正在为一个类制作一个简单的网页，它以滑块格式显示图像。我在页面顶部创建了一个导航栏，链接到不同的页面。通常，导航栏中的文本为白色，但由于某些原因，它仍保持紫色。我就是不能让它变回白色。我很抱歉，如果这是愚蠢的，我不擅长这个。以下是我到目前为止的情况：

<!DOCTYPE html>
<html lang="en">

<head>

<title>Cheese</title>
<link rel="stylesheet" href="mystyles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet">
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
<script src= "https://malsup.github.io/jquery.cycle.all.js"></script>
   
  
<style>
      ol {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      }

     li.bar {
     float: left;
     }

     .bar {
     display: block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     }

     
     .bar:hover {
     background-color: black;
     }
     
    </style>

</head>

<body>
 <nav>
     <ol>
       <li class = "bar"><a href="index.html">Home</a></li>
       <li class = "bar"><a href="as1.html">H2</a></li>
       <li class = "bar"><a href="as2.html">H3</a></li> 
       <li class = "bar"><a href="divs.html">H4</a></li> 
       <li class = "bar"><a href="as4.html">H5</a></li>  
       <li class = "bar"><a href="as5.html">H6</a></li> 
       <li class = "bar"><a href="advcss.html">H7</a></li> 
       <li class = "bar"><a href="as7.html">H8</a></li> 
       <li class = "bar"><a href="as8.html">H9</a></li> 
       <li class = "bar"><a href="as9.html">H10</a></li> 
       <li class = "bar"><a href="as10.html">H11</a></li> 
       <li class = "bar"><a href="as11.html">H12</a></li> 
       <li class = "bar"><a href="as12.html">H13</a></li>
     </ol>
     </nav>
     
 <div class ="container">
 <h1>Look at all these cheese</h1>
    <div class= "slider">
        <img src="slide1.jpeg" width= "640" height = "426">
        <img src="slide2.jpeg" width= "640" height = "426">
        <img src="slide3.jpeg" width= "640" height = "426">
        <img src="slide4.jpeg" width= "640" height = "426">
        <img src="slide5.jpeg" width= "640" height = "426">
    </div>
 <ul id="paap">
      <li id="prev"><a href = "#">Previous</a></li>
      <li id="next"><a href = "#">Next</a></li>
 </ul>
 
 </div> 
 <script>
 $(document).ready(function(){
    $('.slider').cycle({
        fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'
    });
 });
 </script>
 

</body>

</html>


奶酪
ol{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李吧{
浮动：左；
}
.酒吧{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.bar:悬停{
背景色：黑色；
}













看这些奶酪




$（文档）.ready（函数（）{
$（'.slider'）。循环({
外汇：“淡出”，
暂停：1，
上一页：“#上一页”，
下一个：“#下一个”
});
});

列表项

已设置为白色，但它们包含

a href的

，您根本没有设置样式，因此它们将选择浏览器默认样式

添加以下内容：

li.bar a {
  color: white;
}

这将使文本链接的样式为白色。

列表项的样式为白色，但它们包含的

a href的样式为白色，而您根本没有设置样式，因此它们将采用浏览器默认样式
添加以下内容：
li.bar a {
  color: white;
}

这将使文本链接的样式为白色。
通过在class中指定颜色：白色。bar
将在元素li中的文本上使用classbar


因此，我们必须以类栏中的li内的锚定标记为目标，如下所示：

.bar>a{color:white；}
通过在类中指定color:white
。bar
将使用classbar处理元素li中的文本

因此，我们必须以类栏中的li内的锚定标记为目标，如下所示：

.bar>a{color:white；}