将 css 样式添加到仅包含子项的列表项

Posted 2023-03-06

【中文标题】将 css 样式添加到仅包含子项的列表项

【英文标题】：Add css stylings to list item of only it has child

【发布时间】：2015-12-25 06:35:04

【问题描述】：

我有一个如下列表

 <ul>
  <li>
  <a></a>
   <ul>
    <li>
    <a></a>
    </li>
   </ul>
  </li>
</ul>

只有当 li 内部有一个 ul 标记且仅使用 css 时，我才需要使用 :after 添加一个箭头。我已经应用了以下 css 样式，但问题没有解决。

ul li ul:parent:after 
   border: 5px solid transparent;
   border-left: 8px solid #522;
   width: 0;
   height: 0;
   content: "";
   display: inline-block;
   transform: rotate(90deg);
   margin-right: 5px;

有什么方法可以实现吗？感谢您的帮助！

【问题讨论】：

类似这个问题***.com/questions/12206935/…

【参考方案1】：

:parent 选择器在 CSS 中尚不存在。您可以使用 jQuery 中的 :has() 选择器执行您的要求。

但是，我认为 :after 选择器也不是您想要的，因为它不会出现在 li 文本之后，而是在整个元素之后，

<ul>
 <li>
  <a>Outer Item</a>
   <ul>
    <li>
     <a>Inner Item</a>
    </li>
   </ul>
 </li> <-- :after would place arrow here
</ul>

与此类似：

o Outer Item
    o Inner Item
<--

您可以使用 javascript 或 jQuery 在初始文本后添加箭头，但我认为仅使用 CSS 无法做到这一点。

你可以用这个来接近，但是箭头出现在父项和子列表之间的一条线上：

li > a:first-child + ul:before 
   border: 5px solid transparent;
   border-left: 8px solid #522;
   width: 0;
   height: 0;
   content: "";
   display: inline-block;
   transform: rotate(90deg);
   margin-right: 5px;

见http://jsfiddle.net/29kc1p1x/