html - CSS选择器不适用于绝对定位的div
问题描述
我有一些适用于 CodePen 的 CSS,但不适用于我的网站。我正在尝试为包含信息的不透明屏幕滑块选择 .appraisals 类进行背景颜色操作。当我使用选择器更改在 CodePen 上看到的背景时,我的实时网站上的背景颜色不会改变,更具体地说,选择具有 nth-of-type 的 div 的过程不起作用。有人有什么主意吗?
#hero {
height: 92.5vh;
margin: auto;
overflow: hidden;
z-index: 1;
position: relative;
}
.appraisals {
width: 100%;
margin: auto;
position: absolute;
z-index: 1;
transition: 1s;
}
.appraisals:nth-of-type(1){
background-color:red;
opacity: .5;
}
.appraisals:nth-of-type(2){
background-color:blue;
opacity: .5;
}
.appraisals:nth-of-type(3){
background-color:green;
opacity: .5;
}
<div id="hero">
<div class="appraisals">
<div class="appraisals_wrap">
<div class="appraisals_text">
<blockquote>
<p>HELLO</p>
</blockquote>
</div>
</div>
</div>
<div class="appraisals">
<div class="appraisals_wrap">
<div class="appraisals_text">
<blockquote>
<p>HELLO</p>
</blockquote>
</div>
</div>
</div>
<div class="appraisals">
<div class="appraisals_wrap">
<div class="appraisals_text">
<blockquote>
<p>HELLO</p>
</blockquote>
</div>
</div>
</div>
</div>
解决方案
我找到了答案。任何在使用元素选择器时遇到问题的人,请记住:nth-last-of-type
在选择元素时耗尽所有选择器!!!由于某种原因,:nth-of-type
没有工作,但:nth-last-of-type
确实如此。
推荐阅读
- javascript - 如何编写可以更改对象半径的滑块
- android - 如何防止指纹扫描仪被选作游戏手柄?
- python - 如何修复python中的while语法错误?
- c# - 使用 Microsoft.Xrm.Tooling 创建服务和上下文
- assembly - 这个汇编代码是做什么的,C 代码会是什么样子?
- jquery - Bootstrap 模态第二次不触发 jQuery 函数
- node.js - 检测是否在Nodejs中添加而不是修改文件
- webgl - 无法使用 regl 在 Z 方向上绘制点
- c - 如何在C中不允许被零除
- ruby-on-rails - nil:NilClass RoR 的未定义方法“to_sym”