我如何写css而不为特定的情况复制它?

new9mtju  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(110)

我有一个表,我对行进行了一些样式设置,但是当我向表体的表行添加锚标记时,它破坏了我的CSS。但是,当我使用锚标记重复CSS时,我得到了我想要的结果。

table {
  // some css properties

  > thead {
    // some css properties

    > tr {
      > th {
        //some css properties
      }
    }
  }

  > tbody {
    > tr {
      > td {
        //some properties
      }
    }
  }
}

现在在bodytr中添加一个锚标记,它会破坏我的CSS,但是当我复制带有和不带有锚标记的CSS时,它会给我想要的结果

table {
    // some css properties
  
    > thead {
      // some css properties
  
      > tr {
        > th {
          //some css properties
        }
      }
    }
  
    > tbody {
        > a{
            display: contents;
            > tr {
                > td {
                  //some properties
                }
              }        
        }

      > tr {

        > td {
          //some properties
        }
      }
    }
  }

正如你所看到的,我在trtd的锚标记中以及锚标记外有相同的CSS。
但我不想再重复了。请帮帮忙。

zz2j4svz

zz2j4svz1#

>选择器代表direct-child
我怀疑使用这个选择器会给你带来问题。你不能使用它并将相同的属性应用于trtd,不管它是否用a Package 。
了解有关选择器的更多信息:https://blog.webdevsimplified.com/2021-12/css-selectors/

> tbody {
  > a {
   display: contents;      
  }

  tr {
    td {
      //some properties
    }
  }
}

既然你使用的是scss,你也可以使用@mixins来重复代码片段。但是我认为你的用例并不需要这样做。https://sass-lang.com/documentation/at-rules/mixin

相关问题