Question

您好我提供了一个包含许多CSS文件的项目。具有以下结构

<link href="./Premium Nutritional Supplements_files/jquery.owl.carousel.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="all">

  <link href="./Premium Nutritional Supplements_files/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/bootstrap-modal.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/bootstrap-switch.css" rel="stylesheet" type="text/css" media="all">

  <link href="./Premium Nutritional Supplements_files/kumi.global.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/kumi.style.scss.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/kumi.media.css" rel="stylesheet" type="text/css" media="all">
   <link href="./Premium Nutritional Supplements_files/custom.css" rel="stylesheet" type="text/css" media="all">

我在最后添加了 custom.css 来覆盖属性

.post-author-image{
    border-radius: 50%;
}

kumi.global.css 中的

位于 custom.css 之上且包含

div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0!important;
}

但是我无法在custom.css中覆盖border-radius。如何将border-radius从0覆盖到50％？

Answer 1

使用！important应该这样做，因为custom.css最后加载。

.post-author-image{
    border-radius: 50% !important;
}

!important为css提供了更高的优先级，因为＆＃34; kumi＆＃34; css有!important，无论你把自定义css放在哪里，＆＃34; kumi＆＃34; css将生效。

使用!important通常是一个坏主意，尤其是当你选择一个通用的dom元素时，你的情况是＆＃34; kumi css＆＃34;其中!important几乎用于所有事情。

如果可能，更好的解决方案是从＆＃34; Kumi＆＃34;中删除!important CSS

Answer 2

哇。我希望您可以更改kumi.global.css，因为!important标记用于可怕的。禁止使用边界半径似乎是一种强硬的炮兵方式。

这是直接的解决方案：

.post-author-image{
    border-radius: 50% !important;
}

但我希望您能够从全局文件中删除该标记。

无法覆盖css属性

2 个答案: