如何从 CSS 样式中排除子 <li>

【问题标题】：How to Exclude Children <li> from CSS Styling如何从 CSS 样式中排除子 <li>
【发布时间】：2021-06-22 17:52:17
【问题描述】：

我正在使用 SharePoint Designer，我想在我的列表的父级 li（Desc 1 和 Desc 2）上应用自定义项目符号，但实际情况是它被应用于所有列表项，包括孩子们li。有人可以帮我吗？应该如何在 CSS 中正确完成？谢谢。

.tab-content.content-show ul li {
    list-style-image: url(/img.png);
}

.tab-content.content-show ul li > li {
    list-style-image: none !important;
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

要选择直接子代而不是孙子代，可以使用">"，如下图所示

.tab-content.content-show div > ul > li {
    list-style-image: url(/img.png);
}

而且不需要二等舱。

这是自定义的css：

.tab-content.content-show div > ul > li {
    background: url("https://www.kindpng.com/picc/m/313-3131657_blue-bullets-icon-png-transparent-png.png") left center no-repeat;
    background-size:20px;
    padding: 0 0 0 40px;
    
}

【讨论】：

【解决方案2】：

你已经很接近了。您的 CSS 应如下所示：

.tab-content.content-show div > ul > li {
    list-style-image: linear-gradient(to left bottom, red, blue);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

子选择器 (>) 将 CSS 规则应用于特定元素的直接子元素。

查看此相关答案：https://stackoverflow.com/a/4830672/801544

请注意，我使用渐变而不是图像只是为了表明它有效，但您可以使用任何图像代替。

【讨论】：

【解决方案3】：

你应该在 css 中使用“ul:first-child”：

.tab-content.content-show ul:first-child > li{
    list-style-image: url(https://www.w3schools.com/cssref/sqpurple.gif);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

【讨论】：

【解决方案4】：

您可以访问 HTML 代码吗？如果是，我会在您感兴趣的li 上开设课程。

<li class="custom-bullet">Desc 1</li>

.custom-bullet {
   list-style-image: url(/img.png);
}

【讨论】：

遗憾的是，我无权访问父列表项的
。这些列表来自后端，并且已经标明。 @Laxmana

【解决方案5】：

.tab-content.content-show ul li > li 将匹配作为 li 元素的子元素的 li 元素……这在 HTML 中是不允许的。

首先使用子组合器而不是后代组合器。

.tab-content.content-show > div > ul > li {
    list-style-image: url(http://placekitten.com/20/20);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
  <div>
    <ul>
      <li class="parent">Desc 1 </li>
      <ul>
        <li>details 1</li>
        <li>details 2</li>
        <li>details 3</li>
        <li>details 4</li>
      </ul>
      <li class="parent">Desc 2 </li>
      <ul>
        <li>details 1</li>
        <li>details 2</li>
        <li>details 3</li>
        <li>details 4</li>
      </ul>
    </ul><br>
  </div>

【讨论】：

我试过了，但它还没有得到自定义项目符号。 @昆汀
@Xev — 我添加了一个现场演示来证明它确实

【解决方案6】：

您可以将您的css更改为以下方式

.tab-content.content-show > Div >  ul > li {
   color:red;
 }

see the jsFiddle

您还可以设置唯一的类，并设置访问该类的颜色，如下所示

.html

    <div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li class="Desc1">Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li class="Desc2">Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

.css

.tab-content.content-show  .Desc1{
   color:red;
}

.tab-content.content-show  .Desc2{
   color:green;
}

see the jsfiddle

【讨论】：

【解决方案7】：

解决这个问题的最好方法是给父列表项一个类属性，然后为这个类设置样式。

li.parent {
  list-style-image: url(/img.png);
}

.tab-content.content-show ul li > li {
  list-style-image: none !important;
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li class="parent">Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li class="parent">Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

【讨论】：

我想这样做，但我无权访问父列表项的
。这些列表来自后端，并且已经添加了项目符号。

【解决方案8】：

.tab-content.content-show ul li.parent {
  list-style-image: url(/img.png);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li class='parent'>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li class='parent'>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

【讨论】：

我很想这样做，但我无权访问父列表项的
。这些列表来自后端并且已经标明。