给列表项添加CSS样式，仅当它具有子元素时。

14 浏览
0 Comments

给列表项添加CSS样式，仅当它具有子元素时。

我有一个如下的列表：\n

    
  
  • 
    
    
      
      
    • 
        
      
      • 
    
    
  
    •

\n我需要使用只有CSS的方式，在li标签内部有ul标签时添加一个箭头。我已经使用了以下CSS样式，但问题没有解决。\n

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;
}

\n有没有什么方法可以实现这个？非常感谢你的帮助！

0

1 答案

0 Comments

问题原因：CSS中没有类似于:parent的选择器，可以通过jQuery的:has()选择器来实现。然而，使用:after选择器并不完全符合你的需求，因为它不会出现在li文本的后面，而是整个元素的后面。

解决方法：你可以使用JavaScript或jQuery在初始文本后添加箭头，但我认为仅使用CSS无法实现这一点。你可以使用以下方法来接近你的需求，但箭头将出现在父项和子列表之间的一行上。

在CSS中，没有类似于:parent的选择器。然而，可以使用jQuery的:has()选择器来实现你的需求。但是，使用:after选择器并不完全符合你的需求，因为它不会出现在li文本的后面，而是整个元素的后面。

下面是一个示例代码，展示了如何使用jQuery的:has()选择器来添加CSS样式到具有子元素的列表项中：

类似于这样：

o Outer Item

o Inner Item

你可以使用JavaScript或jQuery在初始文本后添加箭头，但我认为仅使用CSS无法实现这一点。下面是一个使用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/](http://jsfiddle.net/29kc1p1x/)

0