我不知道如何选择h1与css选择器在这个html....which的ClassName之一是正确的div？
我不知道如何选择h1与css选择器在这个html....which的ClassName之一是正确的div？
提问于 2020-01-01 02:21:47
我有这个html：
<div class="d-flex align-items-center flex-column flex-sm-row justify-content-between w-100 pt-10 pb-15">
<h1 class="product-title mb-0 pl-10 order-2 order-sm-1 ml-auto ml-sm-0" itemprop="name">
Samsung Galexy A70
</h1>
</div>哪个是真的？
这个选择器？？
div.d-flex align-items-center flex-column flex-sm-row justify-content-between w-100 pt-10 pb-15 h1{
}还是这个？
div.d-flex h1{
}回答 3
Stack Overflow用户
发布于 2020-01-01 02:30:19
你最想要的就是：
.product-title {
// styles go here
}当您使用空格分隔CSS选择器元素时，即使用descendant selector。这意味着像这样的选择器：
div.parent h1 {
// styles go here
}在这里以<h1>元素为目标：
<div class="parent">
<h1>Hello!</h1>
</div>Stack Overflow用户
发布于 2020-01-01 02:37:30
你的第一种方法是错误的，第二种方法是好的
最好在h1上使用类product-title，如下所示
.product-title{color:red;}或者，如果您的类是可重用的，那么标记也是这样的
h1.product-title{color:red;}您还可以选择标记本身，如下所示
h1{color:red;}一切都取决于你的要求
Stack Overflow用户
发布于 2020-01-01 02:37:58
这是相当冗长的第一个，直到它的工作。
请考虑以下内容：
h1是您的div的直接子类，因为它在它的内部，所以在这一点上，它可以用这种方式简单得多：
div h1或者通过它的类标识符使用BEM会更好
.main-container__main-title考虑使用边界元方法的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
<style>
.main-container__main-title {
color: red;
}
</style>
</head>
<body>
<div class="main-container">
<h1 class="main-container__main-title">Hola</h1>
</div>
</body>
</html>
哪里..。
我的主容器有一个雄辩的class
- h1，它属于您的主容器的子容器，它有一个具有类似名称的类，但在最后我添加了
__main-title来标识这个元素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59547398
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号