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

Question

我正在使用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>

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

}

Answer 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

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

Answer 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>

Answer 4

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

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

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

Answer 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>

Answer 6

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

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

参见 JS小提琴

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

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

参见 JSFIDDLE

Answer 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>

Answer 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>