为什么在.container中改变字体后,input中不生效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
 
.container{
font-family: "微软雅黑";
font-weight: bold;
font-size: 40px;
}
 
</style>
</head>
<body>
<div class="container">
<form action="">
<label for="name">姓名</label>
<input id="name" type="text" placeholder="请输入姓名">
</form>
</div>
</body>
</html>

为什么在.container中改变字体后，input中不生效，但是label中却生效了

慕盖茨80918386 2019-01-27

源自：网页布局案例 2-9 作业题

收起

1回答

chrismorgen 回答被采纳获得+3积分 2019-01-28 10:15:53

因为container是label的祖先元素，所以在container中设置样式之后，在它之内的如果没有设置元素字体样式的则都是微软雅黑的字体，所以label中生效的，因为你需要设置的是input标签内字体样式，所以你需要单独设置，可以参考如下代码进行设置，祝学习愉快~

收起回答

慕盖茨80918386 提问者 #1

还是不大明白，为什么container中设置样式之后，input标签内的字体不生效。看层级关系，container也是Input的祖先元素啊

2019-01-28 10:22:18
chrismorgen 回复提问者慕盖茨80918386 #2

你好同学~从实验的效果就可以看出来，input输入框内的字体并不被container的样式影响，只有单独设置input标签的样式才可以哦，祝学习愉快~

2019-01-28 14:55:40