CSS 是否有一种CSS方式可以在一个ul有一个ul子元素时添加一个箭头

在本文中，我们将介绍如何使用CSS来添加一个箭头，当一个ul元素有一个ul子元素时。

阅读更多：CSS 教程

使用伪元素和伪类实现箭头效果

我们可以使用CSS伪元素和伪类来实现箭头效果。首先，我们给包含ul的父元素添加一个类名，例如.has-child。然后，我们可以使用CSS选择器和伪元素来选中具有子元素ul的ul元素，并在其前面或后面添加箭头样式。

下面是一个示例代码：

<ul class="has-child">
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
</ul>

.has-child > li > ul:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #000;
  transform: translateY(-50%);
}

.has-child > li > ul:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #fff;
  transform: translateY(-50%);
}

在上述代码中，.has-child > li > ul:before和.has-child > li > ul:after选择器分别代表ul的直接子元素的前面和后面。通过使用伪元素:before和:after，我们可以创建一个三角形箭头，并通过设置边框颜色和样式来使箭头可见。

这样，当ul元素具有ul子元素时，将会在该ul元素的前面和后面显示箭头。

扩展示例：添加动画效果

除了添加静态的箭头，我们还可以为箭头添加动画效果，使其在展开或折叠时有更好的视觉效果。我们可以使用CSS动画和过渡属性来实现这一点。

下面是一个示例代码：

<ul class="has-child">
  <li>Item 1</li>
  <li class="toggle">
    Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
</ul>

.has-child > li > .toggle > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.has-child > li > .toggle.open > ul {
  max-height: 200px;
}

在上述代码中，我们添加了一个额外的类名.toggle到具有子元素ul的li元素上，并使用CSS过渡属性来实现高度的过渡效果。当点击具有.toggle类的li元素时，我们可以使用JavaScript来切换.open类名，并通过CSS选择器.has-child > li > .toggle.open > ul来改变子元素ul的最大高度。

通过这样做，当点击具有.toggle类的li元素时，子元素ul将会展开或折叠，并伴随着一个平滑的动画效果。

这只是一种实现箭头效果的方法，你可以根据自己的需求进行定制和改进。