为什么父子不继承父的滚动条样式答案

【问题标题】：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>

【讨论】：