Css 如何克服基础手风琴的风格？

我在WordPress主题中使用基础站点，我试图重写手风琴组件的样式：

特别是我希望所有的项目有一个10像素的边界半径

似乎有几个mixin专门应用于列表中的第一个和最后一个元素，它们改变了边界半径：

/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@mixin accordion-item {
  &:first-child > :first-child {
    border-radius: $global-radius $global-radius 0 0;
  }

  &:last-child > :last-child {
    border-radius: 0 0 $global-radius $global-radius;
  }
}

我似乎遇到的问题是无法覆盖此mixin中的边界，我已尝试重新声明mixin并将0更改为$global radius。 我已将全局半径更改为定义的10px样式：

.di-accordian-title {
  background-color: $blue;
  color: $white !important;
  padding: 5px;
  border-radius: 10px;
  margin-top: 5px;
  width: 100%;
  clear: both;
  float: left;
  font-size: 14px;
}

.di-accordian-title:hover, .di-accordian-title:focus {
  background-color: $light-blue;
  color: $white !important;
  padding: 5px;
  border-radius: 10px;
  margin-top: 5px;
  width: 100%;
  clear: both;
  float: left;
  font-size: 14px;
}

我似乎无法覆盖第一个和最后一个项目边界半径

这是我第一次在项目中使用sass，第一次真正使用sass

---

覆盖accordion mixin中设置的默认值的正确方法是什么？

您不需要覆盖mixin，您自己的风格或设置的特殊性应该覆盖它

有两种简单的方法可以做到这一点：

通过设置

在应从app.scss引用的_settings.scss文件中，有一个$global radius的设置，默认设置为0。只需将其设置为10px或0.6rem或任何您喜欢的值，全局半径将更改为该值

< N.B. >这是所有基础元素的半径，而不仅仅是手风琴。

通过特异性

或者，如果您希望保持全局半径为0或其他任何值，并且只希望手风琴的半径为10px：

.my-accordion.accordion {
    .accordion-item {
        &:first-child > :first-child {
            border-radius: 10px 10px 0 0;
        }

        &:last-child > :last-child {
            border-radius: 0 0 10px 10px;
        }
    }
}

这将进入您的项目SCSS文件之一，在基础SCSS之后加载，这些文件也@从App.SCSS文件

导入。

---

编辑：其中。我的手风琴是您为该特定手风琴而开设的课程，但如果您只使用上述SCS中的。手风琴项目部分，它也适用于所有手风琴。

谢谢您的帮助，我还没有机会尝试一下，它看起来非常类似于我之前尝试的操作，没有正确覆盖基本样式。我认为这是因为CSS的目标是a标记，而不是设置边框的父li.accordion项