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

Question

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

为什么？

#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>

Answer 1

:-webkit-scrollbar是伪class。 #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>

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

why parent child does not inherit parent's scroll bar style

css

inheritance

scrollbar