问题是当我为 <a> 设置样式时页脚中列表的标记，即使设置正确以应用样式，也不会发生任何事情。但是，如果我在代码的主要部分向表单添加填充，更改会突然显示在页脚的链接上。
我提供了一个 JSfiddle ( https://jsfiddle.net/wk47q0en/ )，只需转到 css 中的第 56 行并注释掉/删除添加到表单中的随机填充，页脚样式就会消失。我想知道为什么会这样。
如果你想知道，是的，我是 HTML 和 CSS 的新手，这是一些家庭作业的一部分 :D 提前感谢任何有助于解决这个问题的建议。
https://jsfiddle.net/wk47q0en/
HTML
<meta charset="utf-8">
<title>Red Pepper Pizza</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topmenu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Weekly deals</a></li>
<li><a href="#">Resturants</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
<form action="example.htm" method="get">
<fieldset>
<legend>Order your pizza below</legend>
<select name="Pizza" id="Pizza">
<option value="selected" selected>Choose a pizza</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Ham">Ham</option>
<option value="Vegan">Vegan</option>
<option value="Margarita">Margarita</option>
</select>
<p>Choose your Pizza crust</p>
<input type="radio" name="Crust" value="Thick"> Thick
<input type="radio" name="Crust" value="Thin"> Thin
<p>Extra toppings</p>
<input type="checkbox" name="Toppings" value="Onions"> Onions
<input type="checkbox" name="Toppings" value="Salmon"> Salmon
<input type="checkbox" name="Toppings" value="Garlic"> Garlic
<input type="checkbox" name="Toppings" value="Olives"> Olives
<input type="checkbox" name="Toppings" value="Chilli"> Chilli
<input type="checkbox" name="Toppings" value="Peppers"> Peppers
<textarea name="comment" rows="8" cols="62"> Additional specifications...</textarea> <br>
<input type="submit" name="order" value="order">
</fieldset>
</form>
<footer>
<div class="footermenu">
<ul class="footlist">
<li><a href="#">Contact us</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Job oppertunities</a></li>
<li><a href="#">Allergens</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</footer>
</body>
</html>
CSS
/* body etc */
@font-face {
font-family: 'Roboto', sans-serif;
src: url(assets\RobotoFont\Roboto-Regular.ttf);
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0px 10px;
}
/* Navigation/topbar/sidebar */
ul {
margin: 0px 0px 0px 0px;
list-style-type: none;
}
li {
display: inline;
}
.topmenu {
width: 100%;
background-color: #d12d17;
height: 40px;
text-align: center;
margin-top: 0px;
padding-top: 0px;
}
.topmenu a {
display: inline-block;
height: 40px;
color: black;
text-decoration: none;
font-size: 19px;
font-weight: bold;
padding: 10px 25px;
}
.topmenu a:hover {
transform: scale(1.3); }
}
/*Header and intro*/
/* Form elements*/
form {
padding: 0 50%;
}
/*footer */
.footlist a {
display: inline-block;
height: 40px;
color: black;
text-decoration: none;
font-size: 15px;
}
最佳答案
您的 CSS 代码在第 48 行有一个错误。您多了一个大括号。当您在第 58 行设置表单元素的样式时，由于错误，该值实际上并未应用，但后面元素的样式正常工作。当您删除表单元素样式时，错误会影响紧随其后的样式元素，即页脚中的 a 元素。
关于html - 我的页脚 <a> 标签上的样式只有在我向上面的表单添加填充时才有效，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58465309/