【问题标题】:why parent child does not inherit parent's scroll bar style为什么父子不继承父的滚动条样式
【发布时间】:2021-07-09 15:55:07
【问题描述】:

这是包含两个父 div 和子 div 的 html。 Parent 有一个使用 -webkit-scrollbar 的 css 滚动条样式,但是 child 不继承这些样式并显示“常规”滚动条。

为什么?

#childDiv{
  border: 1px red solid;
  height: 100px;
  overflow: inherit;
}

.parentDiv{
  height: 90px;
  border: 1px blue solid;
  overflow: auto;
}
.parentDiv::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}


.parentDiv::-webkit-scrollbar-track {
  border-radius: 6px;
  background: red;
  /* box-shadow: inset 0 0 1px grey;  */
}

.parentDiv::-webkit-scrollbar-thumb {
  background-color: yellow;
  border-radius: 6px;
  border: 3px solid black;
}
<div id="parentDiv" class="parentDiv">
    <div id="childDiv">
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
      one line one line one line one line one line one line one line one line one line <br>
    </div>
  
  </div>

【问题讨论】:

  • 样式在parentDiv类上设置。子项没有该类。
  • @BookOfFlames 你是对的,但问题是指继承,这是一个不同于类分配的机器人。但是,我意识到您的评论将滚动条类分配给我想要拥有滚动条的每个元素

标签: css inheritance scrollbar


【解决方案1】:

:-webkit-scrollbar 是一个伪类。 #childDiv#parentDiv 的子代,但不是任何 .parentDiv::-webkit-scrollbar 的子代。您也不希望 #childDiv 继承 .parentDiv::first-letter 的属性。但是你可以这样写:

.parent::first-letter {
  color: purple;
}

.sort-of-inherit::first-letter, .sort-of-inherit *::first-letter {
  color: green;
}
<div class="parent">
  bla bla bla
  <div class="child">
    bla bla bla
  </div>
</div>

<div class="sort-of-inherit">
  bla bla bla
  <div class="child">
    bla bla bla
  </div>
</div>

【讨论】:

    猜你喜欢
    • 2014-07-21
    • 2019-06-23
    • 1970-01-01
    • 2016-10-30
    • 2013-02-16
    • 2014-03-17
    • 2015-09-02
    • 2016-12-15
    • 1970-01-01
    相关资源
    最近更新 更多