此特定h3标记不会被覆盖。我尝试过使用!important。我看到了一个类似的不同问题,但问题是样式被应用于div。在这里,我选择了正确的标签。
h3 {
text-align: left;
vertical-align: middle;
color: #333333;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: auto;
display: inline-block;
font-size: 2rem;
font-weight: 400;}
这是computed output and a screenshot的结果。
&
这是rendered styles的截图。
更新:
这是相关部分的HTML,我还添加了自定义css:
<!-- Sample Task 1 -->
<div class="container">
<div class="row task">
<div class="col-md-1 centric">
<i class="black-icon icon ion-ios-circle-outline"></i>
</div>
<div class="col-md-11">
<h3>
Solve calculus questions from maths textbook.
</h3>
</div>
</div>
</div>
<br>
<!-- /Sample Task 1 -->
自定义CSS:
.task {
background: #FFFFFF;
border-radius: 50px;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h3 {
text-align: left;
vertical-align: middle;
color: #333333;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: auto;
display: inline-block;
font-size: 2rem;
font-weight: 400;
}
.centric {
justify-content: center;
display: flex;
align-items: center;
}
正如我在上一篇评论中提到的,应用样式的屏幕截图(例如,点击color
的下拉列表)是我们可以帮助您找出应用的样式以及原因的唯一方法。
没有它我们无法猜测你的项目中的其他CSS正在做什么,但这里是你提供的代码的输出;我已将color: #333333;
更改为color: blue;
正如您所见,样式已正确应用:文本为蓝色。 https://codepen.io/cpj22/pen/rJRayz
重读你的问题,我真的不确定感知到的问题是什么。这个h3标签是不是被应用了,还是被应用了?
我找到了解决方案。谢谢KayakinKoder教我从chrome调试技术。自定义webkit转换未在自定义h3中被覆盖。所以,这里是我必须编写的代码,以覆盖未在css中重写的webkit转换。显然,webkit翻译是在标签之后呈现的。
以下是覆盖文本和div翻译的代码:
h3.text-left {
position: relative;
top: 45%;
transform: translateY(-45%);
-webkit-transform: translateY(-45%);
-ms-transform: translateY(-45%);
}