Question

我可以将CSS注入以下代码中以影响类：

  <ul class="productText">
    <li>Thycotic Secret Server <span id="headerControl_VersionNumber" class="VersionNumber">8.8</span></li>
    <li class="EditionLabel"><span id="headerControl_EditionNameLabel" class="EditionName">Express Edition</span>  </li>
  </ul>

我想使用:before替换文字Thycotic Secret Server，我想替换Express Edition。

我是否可以在display:none使用.productText li{}同时保持.EditionLabel span{}或.EditionName :before的可见性？

如：

  .productText:before {
      content:"to replace Thycotic Secret Server" !important;
  }

  .productText li{
      display:none !important;
  }

  .EditionName li{
      display:inline !important;
  }

  .EditionName:before {
      content:"to replace Express Edition" !important;
  }

...显然不起作用，因为.productText类型li的所有子元素都被隐藏。

考虑到要修改的代码，我尝试做的是什么？

[溶液]

由于所有文字＆＃34;在＆＃34;所有li元素都将font-size设置为0，我使用了更具体的元素来控制属性。

  .productText li{
    font-size: 0;
  }

  .productText:before {
    font-size: 1rem;
    content:"replaced larger text"
    font-variant:small-caps;
  }

  .EditionName:after {
    font-size: 0.8rem;
    content:"replaced smaller text"
  }

在这个具体示例中，我将EditionName的font-size放在原始CSS中并将其传输到此集合中以保持相同的外观。

Answer 1

您可以使用font-size，例如

li { font-size: 0; }
li span { font-size: 1rem; }
li span:before { content:"to replace Thycotic Secret Server "; }

示例：http://codepen.io/anon/pen/zxarjd

是否可以利用`display：none`和`display：inline`取消隐藏嵌套的隐藏元素？

1 个答案: