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

Posted 2023-03-06

【中文标题】当链接中不存在跨度时如何应用css样式？

【英文标题】：How to apply css style when a span does not exists in a link?

【发布时间】：2019-06-15 10:36:45

【问题描述】：

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

但是，对于其中没有 span 的其他链接，我想申请 padding-right: 1.35rem; 以保持链接虚拟排列。

这是我添加padding-right的CSS代码

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

只有在a 标签内不存在跨度时，我如何才能应用CSS 代码？

【问题讨论】：

使用:has()probably

出于所有意图和目的，:has() 在 CSS 中不存在。我只是一个提议。它是not supported by a single browser。 OP，您要求的内容无法在 CSS 中真正完成，因为“CSS”中的“C”代表 cascading。它只能向下遍历，不能向上遍历。按照这种逻辑，一旦您向下到 <span> 级别以检查其存在，您就不能将样式 向上返回 应用于父级。您必须使用 javascript 解决方法。

Is there a CSS parent selector? 可能重复 , CSS equivalent of :has() , CSS selector - element with a given child

【参考方案1】：

除非:has() 启动。

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

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

查看 sn-p 以获得一些演示：

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

【参考方案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（父）样式。