Question

我有以下CSS样式，它们应用padding-right并在font-size标记内找到的跨度上更改a。

但是，对于其中没有span的其他链接，我想应用padding-right: 1.35rem;来使链接虚拟排列。

这是我的CSS代码，其中添加了padding-right

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a > span {
    padding-right: 0.50rem;
     font-size: .85rem;
 }

仅在CSS标记内不存在跨度时，如何应用a代码？

Answer 1

除非启动:has()。

我能想到的最好的办法是在指定跨度之前在中写入默认设置。例如：

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a{
    padding-right: 0;
    font-size: 1.4rem;
}

有关一些演示，请参见代码段：

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a > span {
    padding-right: 0.50rem;
    font-size: .85rem;
}
 
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a{
    padding-right: 0;
    font-size: 1.4rem;
}

<div class="sidebar-wrapper">
 <div class="sidebar-menu">
  <div class="sidebar-dropdown">
   <div class="sidebar-submenu">
    
    <!-- li a with span -->
    <li>
     <a>
      <span>
       test
      </span>
     </a>
    </li>
    <!-- li a without span -->
    <li>
     <a>
     test
     </a>
    </li>
    <li>
     <a>
     test
     </a>
    </li>  
    <!-- li a with span -->
    <li>
     <a>
      <span>
       test
      </span>
     </a>
    </li>
    
   </div>
  </div>
 </div>
</div>

Answer 2

消除<span>并向锚点添加id=，对于padding-right样式，锚点应该需要不同的数量。

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a {
    padding-right: 0.50rem;
    font-size: .85rem;
 }

#chgpadding {
    padding-right: 1.40rem;
}

您相关的html将是<a href="" id="chgpadding"></a>而不是<a href=""><span></span></a>。由于您只有#chgpadding样式的一个元素，因此CSS（默认情况下）将比...li a（父样式）具有更高的准确性。

当链接中不存在跨度时如何应用CSS样式？

2 个答案: