我有bootstrap作为第一个链接,然后我的自定义样式。然而,这个特定的标签保持不变。其他人都在工作

问题描述 投票:-1回答:2

此特定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;
}
html css twitter-bootstrap
2个回答
0
投票

正如我在上一篇评论中提到的,应用样式的屏幕截图(例如,点击color的下拉列表)是我们可以帮助您找出应用的样式以及原因的唯一方法。

没有它我们无法猜测你的项目中的其他CSS正在做什么,但这里是你提供的代码的输出;我已将color: #333333;更改为color: blue;正如您所见,样式已正确应用:文本为蓝色。 https://codepen.io/cpj22/pen/rJRayz

重读你的问题,我真的不确定感知到的问题是什么。这个h3标签是不是被应用了,还是被应用了?


0
投票

我找到了解决方案。谢谢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%);
}
热门问题
推荐问题
最新问题