html - 为什么在课堂内选择课程不起作用
问题描述
嘿伙计们,我是 HTML 和 CSS 的初学者,当我尝试选择另一个类中的类时,我遇到了困惑。也就是说,正如您在下面的代码中看到的那样,我试图定位容器类中的 .num1 类。问题是为什么当我直接以 .num1 为目标时,什么都没有发生,但当我以 .container .num1{} 为目标时,一切都按预期工作。我不能直接针对 num1 吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
background: lightcoral;
display: flex;
justify-content: center;
align-items: stretch;
}
.container>div{
background: red;
border:3px solid black;
width: 150px;
height: 150px;
}
.num1{
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="item num1">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
解决方案
你应该这样使用.container .num1
.container{
background: lightcoral;
display: flex;
justify-content: center;
align-items: stretch;
}
.container div{
background: red;
border:3px solid black;
width: 150px;
height: 150px;
}
.container .num1 {
height: 300px;
}
<div class="container">
<div class="item num1">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
我希望这张表有所帮助。
推荐阅读
- c# - 如何在 C# 中验证加盐和散列密码
- macos - Minikube+Kubectl“无法连接到服务器 - 超时”
- rest - 如何使用 REST 请求创建 BigQuery 视图
- php - PHP是否优化了for循环上的多个strlen调用?
- typescript - 为什么自动完成停止在 TypeScript 中类型的对象中工作?
- pentaho-spoon - 在开始第二行的作业之前完全执行第一行的 pentaho 作业
- solr - 如何在 SOLR 的文本字段中搜索短语?
- c - 从 unit8_t 缓冲区到结构的指针类型转换
- c++ - 如何对列表执行 GroupBy Sum 查询?
- java - AddLinkEntry 类是原始类型。对泛型类型 AddLinkEntry 类的引用
应该参数化