覆盖！重要的是不可能

Question

我正在使用Nintex / Sharepoint 2016处理表单，我想删除滚动条。在检查css时，这就是它所显示的内容：

我已经尝试实现以下css来覆盖溢出但我没有运气。
我有什么遗漏的吗？

.overflowY { overflow-y: hidden !important;}
.ms-core-overlay .overflowY { overflow-y: hidden !important;} 

当我使用#s4-workspace {}时，它会隐藏整个页面的滚动页面，而不是表单中的页面查看器。也许我应该使用#s4-workspace .overflowY {} ......？

更新：

进一步检查，我注意到iframe部分，因为添加的自定义css部分也在那里......但是，还有其他东西会覆盖它。

Answer 1

这个选择器......

.ms-core-overlay .overflowY

...匹配任何带有类＆＃39; overflowY＆＃39;的元素，这是具有类＆＃39; ms-core-overlay＆＃39;的任何元素的后代。请记住，CSS中的空格是有意义的。

你实际应该写的是......

.ms-core-overlay.overflowY

...选择任何同时应用了这两个类的元素。是的，这个选择器的特异性高于.overflowY的特异性：显然，两个类的重量不止一个。

Answer 2

您需要了解css特异性和顺序以及可能的选择器。回答你的问题。

你的第一个选择器

.overflowY { overflow-y: hidden !important; }

只有> 原始选择器后才能使用

.overflowY { overflow-y: scroll !important; }

订单示例：

.overflowY {
  height:100px;
  overflow:scroll !important;
}
.inner {
  height: 1000px
}

/* as this is included after and has same specificity, it should override any previous */
.overflowY {
  overflow:hidden !important;
}

<div class="overflowY">
  <div class="inner">should have no scrollbar</div>
</div>

你的第二个选择器是错误的 - 你说overflowY是ms-core-overlay的孩子，你需要将其更改为

.ms-core-overlay.overflowY { overflow-y: hidden !important;} 

通过删除空格，你说的是一个带有两个类的元素，并且因为两个类比一个类更具体，那么这也应该覆盖原来的

特异性示例

/* as this is more specific (ie 2 classes vs 1 class) order does not matter */
.another-class.overflowY {
  overflow:hidden !important;
}

.overflowY {
  height:100px;
  overflow:scroll !important;
}
.inner {
  height: 1000px
}

<div class="another-class overflowY">
  <div class="inner">should have no scrollbar</div>
</div>

有关特异性的更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://css-tricks.com/specifics-on-css-specificity/