Question

如何让那些有孩子的li ul。我想将CSS设置为li。我无法设置课程，因为li是动态打印的。当我将CSS设置为如下所示时，它将所有父li设置为加号。

＆＃13;

.ul{
 width:200px;
 position:relative;
}
.ul li{
   position:relative;
 }
.ul > li:before{
 content : '+';
 position: absolute;
 top: 0;
 right: 7px;
}

＆＃13;

<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
    <ul>
       <li>Sub List 1</li>
       <li>Sub List 2</li>
       <li>Sub List 3</li>
    </ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.

＆＃13;

Answer 1

您无法做到这一点，因为在CSS中，您没有父选择器。

例如，您无法执行以下操作：

ul < li { color: #ddd; }

甚至是：

ul:has(li) { color: #ddd; }

这是因为如果你有这样的parent selector，会有很多性能问题，例如重新呈现页面。这就是W3C人员没有添加父选择器工具的原因。

请在此处阅读更多内容：

Is there a CSS parent selector?

Parent selectors in CSS

Answer 2

你真的非常接近。诀窍是简单地设计ul内的每个.ul。然后将+移动到您希望它出现的位置（即在父li的第一行之后）。

.ul {
  width: 200px;
  position: relative;
}
.ul li {
  position: relative;
}
.ul ul::before {
  content: '+';
  position: absolute;
  top: 0;
  right: 7px;
}

<ul class="ul">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3
    <ul>
      <li>Sub List 1</li>
      <li>Sub List 2</li>
      <li>Sub List 3</li>
    </ul>
  </li>
  <li>List item 4</li>
</ul>
This is style for that.

得到那些有子孩子的李

2 个答案: