适合:target伪类的交互实践实例页面

展示

代码

• HTML：

  <ui-popup id="popup" transition position="right">
      <ui-overlay fade open></ui-overlay>
      <ui-popup-container>
          <a href="##" part="close">关闭</a>
      </ui-popup-container>
  </ui-popup>
  
  <a href="#popup" type="primary" class="ui-button">显示浮层</a>

• CSS：

  .cs-tab-li {
      display: inline-block;
      background-color: #f0f0f0;
      color: #333;
      padding: 5px 10px;
  }
  .cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-tab .cs-tab-li:first-child,
  .cs-tab-anchor-2:target ~ .cs-tab .cs-tab-li:nth-of-type(2),
  .cs-tab-anchor-3:target ~ .cs-tab .cs-tab-li:nth-of-type(3) {
      background-color: deepskyblue;
      color: #fff;
  }
  .cs-panel-li {
      display: none;
      padding: 20px;
      border: 1px solid #ccc;
  }
  .cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-panel .cs-panel-li:first-child,
  .cs-tab-anchor-2:target ~ .cs-panel .cs-panel-li:nth-of-type(2),
  .cs-tab-anchor-3:target ~ .cs-panel .cs-panel-li:nth-of-type(3) {
      display: block;
  }