Question

我花了相当多的时间来解决为什么我的h3没有显示正确的颜色或悬停。

.grid.item__listings > li > a h3.v-h3, 
.grid.item__listings > li > a:visited h3.v-h3, 
.grid.item__listings > li > a:active h3.v-h3 {
  color: #373533
}

我的HTML结构如下：

<section>
    <ol class="grid item__listings">
        <li class="item two odd col-7 column">
             <a href="/">
                 <figure>
                     <img src="/images/listings/maven.jpg" />
                     <figcaption class="description">
                          <h4>Product
                           </h4>
                          <h3 class="v-h3">S O 5
                            </h3>
                      </figcaption>
                  </figure>
              </a>
          </li>
      </ol>
 </section>

在我的Web Inspector中，它将其标记为找到正确的样式颜色，但它未应用？

在一个独立的环境中，着色效果很好，但我的规则没有其他颜色，所以我不明白它为什么不起作用。

在我的body.is-black页面上，它可以正常工作。

web inspector view of correct colour being applied

＆＃13;

.col-4 {
  width: 32%
}

.column {
  float:left;
  display:block
}

a, a:visited {
 color: #d3b553;
 text-decoration: underline
}

 a:hover, a:focus {
  color: #666
 }
 
h4 {
 color: #9c886d
}

h3 {
 font-family: 'Neue Haas Unica W01';
 font-weight: 400;
 font-size: 22px;
 font-size: 2.11rem;
 letter-spacing: .044rem;
}
 
 .item__listings .v-h3 {
 font-style: normal;
}

ul#primary__nav > li > a, ul#primary__nav > li a:visited, ul#primary__nav > li a:active,
ul#secondary__nav > li > a, ul#secondary__nav > li > a:visited, ul#secondary__nav > li a:active,
.grid.item__listings > li > a h3.v-h3, .grid.item__listings > li > a :visited h3.v-h3, .grid.item__listings > li > a:active h3.v-h3 {
 color: green
}

 ul#primary__nav > li > a:hover, ul#primary__nav > li > a:focus,
 ul#secondary__nav > li > a:hover, ul#secondary__nav > li > a:focus {
  color: #000
 }

.grid.item__listings > li > a:hover h3.v-h3, .grid.item__listings > li > a:focus h3.v-h3 {
 color: #d7a262
}

/* Styles for when body.is-black */

body.is-black ul#primary__nav > li > a, body.is-black ul#primary__nav > li > a:visited, body.ius-black ul#primary__nav > li a:active,
body.is-black ul#secondary__nav > li > a, ul#secondary__nav > li > a:visited, ul#secondary__nav > li a:active,
body.is-black .grid.item__listings > li > a h3.v-h3, .grid.item__listings > li > a:visited h3.v-h3, .grid.item__listings > li > a:active h3.v-h3 {
 color: #bab09b
}

 body.is-black ul#primary__nav > li > a:hover, body.is-black ul#primary__nav > li > a:focus,
 body.is-black ul#secondary__nav > li > a:hover, ul#secondary__nav > li > a:focus,
 body.is-black .grid.item__listings a:hover h3, .grid.item__listings a:focus h3 {
  color: #fff
 }

＆＃13;

<ul id="primary__nav">
   <li>
     <a href="/">
       Menu
     </a>
   </li>  
</ul>
<section class="col-12">
                        <ol class="grid item__listings">
                            <li class="item two odd col-7 column">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/maven.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two even col-4 column right">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/haers.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two odd col-4-5 column">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/haya.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two even col-7 column right">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/ybk.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two odd col-8 column">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/lu.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                        </ol>
                    </section>

＆＃13;

Answer 1

您需要使用LVHA订单正确设置链接的样式。

由：active伪类定义的样式将被any覆盖后续与链接相关的伪类（：link，：visited或：active）具有至少相同的特异性。要适当地设置链接，请添加：：链接和：访问规则但之前的悬停规则：活动的，由LVHA订单定义:: link - ：visited - ：hover - ：活性

请阅读此CSS :hover

使用h3.v-h3时，您的样式将真正起作用，因为您正在指定css声明的权重。

请阅读此关于CSS Specificity

的链接

请参阅下面的示例代码，其中显示了LVHA顺序并使用css特异性使悬停工作。

/* follow LVHA */
.lvha> a:link h3{
  color: gray;
}
.lvha> a:visited h3{
  color: yellow;
}
.lvha> a:hover h3{
  color: green;
}
.lvha> a:active h3{
  color: red;
}

/* Dont follow LVHA */
.not-lvha> a:hover h3{
  color: green;
}
.not-lvha> a:link h3{
  color: gray;
}
.not-lvha> a:visited h3{
  color: yellow;
}
.not-lvha> a:active h3{
  color: red;
}


/* Dont follow LVHA but use CSS Specificity */
.spec-lvha> a:hover h3.spec{
  color: green;
}
.spec-lvha> a:link h3{
  color: gray;
}
.spec-lvha> a:visited h3{
  color: yellow;
}
.spec-lvha> a:active h3{
  color: red;
}

<h4>If you are following LVHA order change your color to GREEN</h4>

<div class="lvha">
  <a href="#">
    <h3>I follow LVHA order</h3>
  </a>
</div>

<div class="not-lvha">
  <a href="#">
    <h3>I dont follow</h3>
  </a>
</div>

<div class="spec-lvha">
  <a href="#">
    <h3 class="spec">I dont follow but use CSS Specificity</h3>
  </a>
</div>

希望这有帮助

Answer 2

我不确定如果我理解正确但也许这有助于你

.grid.item__listings > li > a{
  text-decoration: none !important;
}

.grid.item__listings > li > a:hover h3.v-h3{
  color:red !important;
}

OR

.grid.item__listings > li > a h3.v-h3:hover{
  color:red !important;
}

使用!important;覆盖之前的Style。 alse seans位于<a>，默认样式将来自a标记 https://codepen.io/anon/pen/MQGGWY?editors=1111

a：悬停h3颜色造型不起作用

2 个答案: