Question

我有以下html和css

.a {
  text-align: center;
  a {
    text-decoration: none;
    color: $blue;
    font-size: 1.2rem;
    font-weight: 700;
  }
}

.btn {
  display: block;
  padding: 1rem 2.5rem;
  text-align: center;
  text-decoration: none;
  font-size: $medium;
  font-weight: $bold;
  cursor: pointer;
  &-grey {
    background-color: $light-grey;
    color: $grey;
  }
  &:hover {
    background-color: $green;
    color: white;
  }
}

<div class="a">
  <a class="btn btn-grey" href="#">Link</a>
  <a href="#">Another Link</a>
</div>

我有a div的样式需要影响无类别的锚标记，同时我需要a类的btn标记才能有不同的样式。不用说，他们都继承了我在父母身上宣称的风格。

是否存在一种最佳且完全支持的方式来忽略遗传或增加特异性？

我正在使用Sass，并且btn在不同的文件中设置样式，如果我将它嵌套在父文件中它按预期工作。

Answer 1

有一个伪选择器

:not(.class)

.a {
    text-align: center;

    a {
        text-decoration: none;
        color: $blue;
        font-size: 1.2rem;
        font-weight: 700;
    }
}


.btn {
    display: block;
    padding: 1rem 2.5rem;
    text-align: center;
    text-decoration: none;
    font-size: $medium;
    font-weight: $bold;
    cursor: pointer;

    &-grey {
        background-color: $light-grey;
        color: $grey;
    }

    &:hover {
        background-color: $green;
        color: white;
    }
}
div.a > a:not(.btn){
    text-decoration: none;
    color: red;
}
div.a > a:not(.btn):hover{
    color: green;
}

<div class="a">
    <a class="btn" href="#">Link</a>
    <a href="#">Another Link</a>
</div>

修改

添加了伪选择器，以显示如何设置两行以增加选择器的特异性。

覆盖父样式

1 个答案: