如何覆盖嵌套的sass类中的标签

Question

我试图在此 sass类 &.featured中定位 H3标签，但我不知道如何编码？也许我误读了CSS技巧中的文档？

tag<tag

前端

<div class="col-6 col-12-narrower">
        <section>
          <header>
            <a class="image featured" href="/index.html"><h3>test one</h3></a>
          </header>
          <p>Sed tristique purus vitae volutpat commodo suscipit amet sed nibh. Proin a ullamcorper sed blandit. Sed tristique purus vitae volutpat commodo suscipit ullamcorper sed blandit lorem ipsum dolore.</p>
        </section>
      </div>

无礼

/* Image */

    .image {
        border: 0;
        position: relative;

        &:before {
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        &.fit {
            display: block;

            img {
                display: block;
                width: 100%;
            }
        }

        &.featured {
            display: block;
            margin: 0 0 2em 0;
            background-image: linear-gradient(to bottom right, rgb(187, 171, 179), #3b3639);
            padding:50px;

            a>h3 {
                font-size: x-large;
                color: white;
            }
        }

        &.logo {
            display: block;
            margin: 45px 0px .6em 0;

            img {
                display: inline;
                max-width: 100%;
                height: auto;
            }
        }
    }

Answer 1

您的符合a>h3的代码表示.featured a h3，但是您需要.featured h3（a.featured h3）。

尝试

    &.featured {
        display: block;
        margin: 0 0 2em 0;
        background-image: linear-gradient(to bottom right, rgb(187, 171, 179), #3b3639);
        padding:50px;

        h3 {
            font-size: x-large;
            color: white;
        }
    }