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

Question

这是包含两个父和子 div 的 html。Parent 有一个 css 滚动条样式使用-webkit-scrollbar，但是 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>

标签： cssinheritancescrollbar

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