A:悬停h3颜色样式不起作用

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检查器中，它将其标记为找到了正确的样式颜色，但却没有应用？

在它自己的环境中，着色效果很好，但是我的规则没有其他颜色，所以我看不出为什么它不起作用。

有趣的是，在我的body.is-black页面上，它工作得很好。

使用正确颜色的web检查器视图

​

.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
 }

<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>

​

Answer 1

您需要使用LVHA-order对链接进行适当的样式设置。

由:active伪类定义的样式将被至少具有相同特性的任何与链接相关的伪类(:link、：访问或:active)覆盖。要对链接进行适当的样式设置，请将:悬停规则放在:link之后，但在:active规则之前，这是由LVHA定义的-order :link -：style :active -：active。

请阅读这个CSS :悬停

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

请阅读有关CSS特异性的链接

请参阅下面的示例代码，显示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;
}

或

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

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