我无法获取我的CSS代码来显示我在浏览器中所做的更改

问题描述 投票：0回答：3

当我刷新它时，我无法获取我的CSS代码来显示我在浏览器中所做的更改。一些CSS代码工作正常，我在下面提供的一些CSS代码无法正常工作。我正在尝试更改主标题导航栏上的CSS，但没有任何更改正在运行。例如，如果我将背景颜色更改为红色，则不会发生任何事情。

   nav {
	width: 100%; 
  	height: 100px; 
  	background-color: #0b98de;
    }

    nav a {
	display: block; 
	font-family: sans-serif;
    font-size: 9px;
    color: white;
	background-color: #17b0cf;
    border: 1px solid #000;
	padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
	text-decoration: none;
    }

    nav a:hover {
    background-color:#e3e7ee
    }

    #logo {
    font-family: 'Hind', sans-serif;
    font-size: 30px;
    letter-spacing: -2px;
    text-shadow: 1px 1px 2px #c4c4c4;
    padding-left: 20px;
    padding-right: 40px;
    margin-right: 10px;
    margin-top: -20px;
    }
<body>
	<nav>
	<a id="logo" href="#">Logo</a>
	<a href="#">How it works</a>
	<a href="#">Sign Up</a>
	<a href="#">Login</a>
    </nav>
   </body>
html css
3个回答
-1
投票

您的语法错误

nav a:hover{
    background-color:#e3e7ee      
}

你应该用CSS中的分号来结束事情。将以下内容更改为

nav a:hover{
    background-color:#e3e7ee;
}

如果仍然无效，请尝试使用其他浏览器并查看其行为方式。如果它在其他浏览器中工作，则必须清除测试浏览器的缓存。

-1
投票

使用下面的HTML代码结构：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        nav {
            width: 100%; 
            height: 100px; 
            background-color: #0b98de;
        }

        nav a {
            display: block; 
            font-family: sans-serif;
            font-size: 9px;
            color: white;
            background-color: #17b0cf;
            border: 1px solid #000;
            padding-top: 20px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
        }

        nav a:hover {}

        #logo {
            font-family: 'Hind', sans-serif;
            font-size: 30px;
            letter-spacing: -2px;
            text-shadow: 1px 1px 2px #c4c4c4;
            padding-left: 20px;
            padding-right: 40px;
            margin-right: 10px;
            margin-top: -20px;
        }
    </style>
</head>
<body>
    <nav>
        <a id="logo" href="#">Logo</a>
        <a href="#">How it works</a>
        <a href="#">Sign Up</a>
        <a href="#">Login</a>
    </nav>
</body>
</html>
-1
投票

确保您的HTML语法并创建一个style.css文件并在那里插入您的css代码。这将是一个很好的做法。

  1. 保持单独的style.css文件或在html文件中使用<style>标记。
  2. 在创建navbar第一个ul然后li时，始终遵循正确的模式。

nav {
    width: 100%; 
    height: 100px; 
    background-color: #0b98de;
}

nav a {
    display: block; 
    font-family: sans-serif;
    font-size: 15px;
    color: white;
    background-color: #17b0cf;
    border: 1px solid #000;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-decoration: none;
}

nav a:hover {
    background-color:grey;
}

#logo {
    font-family: 'Hind', sans-serif;
    font-size: 30px;
    letter-spacing: -2px;
    text-shadow: 1px 1px 2px #c4c4c4;
    padding-left: 20px;
    padding-right: 40px;
    margin-right: 10px;
    margin-top: -20px;
}
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <nav>
        <a id="logo" href="#">Logo</a>
        <a href="#">How it works</a>
        <a href="#">Sign Up</a>
        <a href="#">Login</a>
    </nav>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.