css怎么选择只以ul最为父元素的li

Posted 2023-05-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎么选择只以ul最为父元素的li相关的知识，希望对你有一定的参考价值。

<ul id="menu">
<li>111</ li>
<li>111
<ul>
<li>222</ li>

</ ul>

</ li>
<li>111</ li>
<li>111</ li>
</ ul>
怎么用css选择所有<li>111</ li>而不选择<li>222</ li>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#menu margin: 0;
#menu > li color:#00F;
#menu li ul li color:#F00;
</style>
</head>
<body>
<ul id="menu">
        <li>111</li>
        <li>111
                <ul>
                        <li>222</li>

                </ul>

        </li>
        <li>111</li>
        <li>111</li>
</ul>
</body>
</html>

#menu li

这样写就是控制的所有的li

#menu li ul li

这样写的就是专门控制的<li>222</li>里面的

#menu > li

这样写是只控制<li>1111</li>里面的

参考技术A <style>
.cheshi  width:200px; height:200px; border:#000 solid 1px;
.cheshi1  width:200px; height:200px; border:#000 solid 1px;
/*选择方法一*/
.cheshi ul li  width:20px; height:20px;
/*选择方法二*/
.cheshi1 li  width:20px; height:20px;
</style>
<div class="cheshi">
<ul class="cheshi1">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>

<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</div>
两种方法对比，第二种是以ul 为父元素选择li（只选中了 <li>1</li>）
第一种是以ul的父元素选择li （选中了 <li>1</li>和<li>2/li>）
我们可以根据具体的需要选择定义的li

参考技术B

你好，可以这样写：

#menu > li border:1px solid red;

，其中符号“>"表示直接子元素，不含嵌套的子元素。

参考技术C 在css中写li样式的时候，前面加个ul

如

#menu li｛｝

这个是id为menu 的层下的 li 的样式，如果li 外面不套别的元素可以用#menu > li｛｝
否则就不要用参考技术D <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#menu margin: 0;
#menu > libackground: red;
</style>
</head>
<body>
<ul id="menu">
<li>111</li>
<li>111</li>
<ul>
<li></li>
<li></li>
</ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
</html>

#menu > libackground: red;用子选择器，只选取对应元素的子籍，不会影响到里面其他的

如何使用 CSS 选择和设置所有具有 UL 子元素的 LI 元素？ [复制]

【中文标题】如何使用 CSS 选择和设置所有具有 UL 子元素的 LI 元素？ [复制]【英文标题】：How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate] 【发布时间】：2012-09-26 23:30:50 【问题描述】：

可能重复：Complex CSS selector for parent of active child

我正在制作一个 CSS 上下文菜单，我希望所有具有子菜单的列表项的样式都不同，以便向用户直观地表示它们具有子菜单。

上下文菜单是一个 UL 元素，它的列表项是 LI，子菜单是 UL。 我已经完成了功能，我只需要能够以不同的方式设置子菜单项的样式，以便它们明显不同。

代码和伪代码：

我有什么（工作 CSS）：

.bhContextMenu,
.bhContextMenu LI UL
background:white;
background:rgba(255,255,255,0.95);
border:0.5mm solid lightgray;
border-color:rgba(0,0,0,0.25);
border-radius:1mm;
box-shadow:0 1mm 2mm lightgray;
box-shadow:0 1mm 2mm rgba(0,0,0,0.25);
cursor:default;
display:none;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:1.5in;

.bhContextMenu LI
padding:1mm 4mm;

.bhContextMenu LI:hover
 background: lightgray;
 background: rgba(0,0,0,0.1);

.bhContextMenu LI UL
display:none;
list-style:none;
position:absolute;
left:1.5in;
margin-top:-1.5em;

.bhContextMenu LI:hover UL,
.bhContextMenu LI UL:hover
display:block;

.bhContextMenu HR
border: none;
border-bottom: 0.5mm solid lightgray;

我也想要的（伪代码）：

.bhContextMenu LI contining UL
font-weight:bold;/* or something */

【问题讨论】：

在纯 CSS 中不可能。在某个时候有一些关于实施这一点的讨论，但不这样做的原因是因为它会非常慢。完成此类操作的最简单方法是向包含 ul 的元素添加一个类。您是否使用任何后端代码来呈现此 HTML？ HTML 非常简单（这是我想要的；一个人可以轻松地制作自己的上下文菜单，而无需太多麻烦/知识）。这是一个带有子菜单的基本菜单：

&lt;UL CLASS="bhContextMenu" ID="CONTEXT"&gt;&lt;LI&gt;Menu item&lt;/LI&gt;&lt;LI&gt;Submenu&lt;UL&gt;&lt;LI&gt;Submenu item&lt;/LI&gt;&lt;/UL&gt;&lt;/LI&gt;&lt;/UL&gt;

【参考方案1】：

除非您只是 distinguishing between empty and non-empty elements（您不是...），否则您无法根据内容选择元素。

你能做的是

更改您的标记，为包含子菜单的菜单项添加一个类，并为其设置样式。

在“不可见/折叠”模式下更改子菜单的样式，使它们实际上可见，但只是作为一个小箭头或您想使用的其他任何东西来表示那里有一个子菜单。在这里演示：http://jsbin.com/ojociq/1/edit

【讨论】：

【参考方案2】：

如前所述，CSS 选择器无法解决您的要求（请参阅specs）。

当然，您可以将类添加到列表项中，但解决您需要的最简单的方法是一行简单的 jQuery 脚本：