需要在选项卡中标准呈现单选按钮和标签的纯 CSS 选项卡

Question

要生成 CSS_only 选项卡，单选按钮将被发送到视图之外，并且选项卡标签具有其特定的样式。

.tabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs label {
  display: block;
  min-height: 150px;
  padding: 4px 4px;
  [...]
  }
.tabs label:hover {
  background: #E0F8E0;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 1.08em;
  line-height: 1.1em;
  padding: 22px;
  position: absolute;
  top: 53px;
  left: 0;
  background: #ffffff;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 3px;
  border-top: 3px solid #E0F8E0;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

但是，在生成的可见 div 单选按钮及其各自标签的内容内需要恢复到标准模式。

<ul class='tabs'>
  <li>
    <input type='radio' name='tabs' id='tab_101' checked />
  <label for='tab_101'>
    <img id='101' name='masteroption %>' src='/masters/101.jpg' />
  </label>
  <div id='tab-content_101' class='tab-content'>
    <input type="radio" id="432432" name="depth" value="432" checked="checked" class='tabs-inner'>
    <label class='tabs-inner-label'>432mm</label>

我为内部单选和标签标签分配了不同的类，

.tabs-inner[type='radio'] + label {
    display: inline-block;
    margin-left: 0.5rem;
    margin-right: 1rem;
    margin-bottom: 0;
    vertical-align: baseline;
}
.tabs-inner-label {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.8;
    color: #0a0a0a;
}

但是，浏览器开发工具显示应用的类仍然是父类而不是直接分配的类

如何为这些嵌套项赋予不同的样式？

Answer 1

试试这个

.tabs .tab-content .tabs-inner-label{
    display: block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.8;
    color: #0a0a0a;
}

!important 是您最后的选择。