css - 如果列表中有子项，我如何获得要显示的图标

Question

我想知道当子元素存在于其中时，我是否有可能在父菜单元素上获得一些小的指示器？下面是我的一个菜单项的代码。任何建议都会很棒。

 <asp:LoginView ID="AdministrationLV" runat="server">
                <RoleGroups>
                    <asp:RoleGroup Roles="Masters, General Managers, Administrators, Managers">
                        <ContentTemplate>
                            <div id="MainMenu3">
                                <div class="list-group panel">
                                    <a class="list-group-item list-group-item-success" href="#demo3" data-toggle="collapse" data-parent="#MainMenu3">+  Administration  </a>
                                    <div class="collapse" id="demo3">
                                        <a class="list-group-item1" href="#Appliances" data-toggle="collapse" data-parent="#Appliances">+  Appliances</a>
                                        <div class="collapse list-group-submenu" id="Appliances">
                                            <a class="list-group-item2" href="../../../../Homes/Appliances/Fridge.aspx" data-parent="#Appliances">Fridge</a>
                                            <a class="list-group-item2" href="../../../../Homes/Appliances/Freezers.aspx" data-parent="#Appliances">Freezer</a>
                                        </div>

                                        <div id="list-group panel">
                                            <a class="list-group-item1" href="../../../General/Authorities/Authorities.aspx" data-parent="#Mainmenu3">Authorities</a>
                                        </div>

                                        <a class="list-group-item1" href="#Backgrounds" data-toggle="collapse" data-parent="#Backgrounds">+  Backgrounds</a>
                                        <div class="collapse list-group-submenu" id="Backgrounds">
                                            <a class="list-group-item2" href="../../../../General/Religions/Religions.aspx" data-parent="#Backgrounds">Relegion</a>
                                            <a class="list-group-item2" href="../../../../General/Ethnicities/Ethnicities.aspx" data-parent="#Backgrounds">Ethnicities</a>
                                        </div>


                                        <a class="list-group-item1" href="#Placements" data-toggle="collapse" data-parent="#Placements">+  Placements</a>
                                        <div class="collapse list-group-submenu" id="Placements">
                                            <a class="list-group-item2" href="../../../../Staff/Placements/New_Referral.aspx" data-parent="#Placements">New placement</a>
                                            <a class="list-group-item2" href="../../../../Staff/Placements/End_Referral.aspx" data-parent="#Placements">End Placement</a>
                                            <a class="list-group-item2" href="../../../../Staff/Placements/New_Placement.aspx" data-parent="#Placements">New Referal</a>
                                            <a class="list-group-item2" href="../../../../Staff/Placements/End_Placement.aspx" data-parent="#Placements">End Referal</a>
                                        </div>

                                        <a class="list-group-item1" href="#Education" data-toggle="collapse" data-parent="#Education">+  Education</a>
                                        <div class="collapse list-group-submenu" id="Education">
                                            <a class="list-group-item2" href="../../../../General/Education/Schools.aspx" data-parent="#Education">Schools</a>
                                        </div>

                                        <a class="list-group-item1" href="#PoliciesDoc" data-toggle="collapse" data-parent="#PoliciesDoc">+  Policies/Documents  </a>
                                        <div class="collapse list-group-submenu" id="PoliciesDoc">
                                            <a class="list-group-item2" href="../../../../Homes/Document_Forms/Document_Types.aspx" data-parent="#PoliciesDoc">Add/Edit Documents</a>
                                            <a class="list-group-item2" href="../../../../Homes/Document_Forms/Upload_Home_Document.aspx" data-parent="#PoliciesDoc">Update House Documents</a>
                                            <a class="list-group-item2" href="../../../../Staff/Group/Group_Document_Forms/New_Group_Template.aspx" data-parent="#PoliciesDoc">Update Group Template</a>
                                            <a class="list-group-item2" href="../../../../Staff/Group/Group_Document_Forms/New_Group_Policy.aspx" data-parent="#PoliciesDoc">Update Group Policy</a>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </ContentTemplate>
                    </asp:RoleGroup>
                </RoleGroups>
            </asp:LoginView>

这是使用 bootstrap CSS 和一些较小的颜色交替完成的。

Answer 1

没有子节点的元素与 :empty 伪类匹配，因此要检测至少有一个子节点的元素，您可以使用

:not(:empty) {
   ...
}

并可能在 :before/:after 伪元素中添加信息作为 content 或作为 background 图标，例如

:not(:empty):after {
   content: " (not empty)";
   display: inline-block;
}