CSS3中的子元素选择器，无法正常使用？

大白baymax · 发表于 2021-8-9 11:43

CSS3中的子元素选择器，无法正常使用？代码如下：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul > li {
				color: red;
			}
		</style>
	</head>
	<body>
		子元素选择器  子指的是 亲儿子    孙子 重孙子  不算
		要求:
		1.让一级菜单的颜色变为红色
		<ul>
			<li>一级菜单
			
			<ul>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>	
			</li>
		</ul>
	</body>
</html>

我想让一级菜单变成红色，二级菜单不变色，请问怎么修改呢？这个效果如下：问题.jpg

Loker · 发表于 2021-8-9 12:03

1. li的位置好像不太对
2. 两个ul不能区分吧
修改后：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .ul1>li {
                color: red;
            }
        </style>
    </head>
    <body>
        子元素选择器  子指的是 亲儿子    孙子 重孙子  不算
        要求:
        1.让一级菜单的颜色变为红色
        <ul class="ul1">
            <li>一级菜单</li>
             
            <ul class="ul2">
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul> 
            
        </ul>
    </body>
</html>

By丿安之若素 · 发表于 2021-8-9 12:27

像二楼那么写，你搞一个 ul，所有ul都会变红啊，你套10层也都是一种ul 都会变红。

soiie · 发表于 2021-8-9 12:44

因为你的二级菜单，也符合 css选择器的规则
你可以这样：body>ul>li
从body节点开始选。

不是css选择器有问题，而是dom结构有重复，明白了吗？

极品小猫 · 发表于 2021-8-9 12:45

方案一：如 2 楼使用 class 或者 id 等特征，有针对性的控制 CSS

方案二：使用更详细的 CSS 选择器，如果直接使用 UL li，选择器则应用最后一个正确的CSS样式效果

[CSS] 纯文本查看 复制代码

            body > ul {
                color: red;
            }
            body > ul > li > ul {
                color: black;
            }

ghd19940802 · 发表于 2021-8-9 13:18

ul > li em
选择器添加em
.....
<ul>
<li><em>一级菜单</em>
用em把一级菜单包裹

zhou773 · 发表于 2021-8-9 13:39

谁教你这么写的
w3c 标准 ul下面必须是li
你可以再套ul
但是ul 得在li 下面

yanghucheng1998 · 发表于 2021-8-9 13:40

加个class或者id啊

大白baymax · 发表于 2021-8-9 13:50

zhou773 发表于 2021-8-9 13:39
谁教你这么写的
w3c 标准 ul下面必须是li
你可以再套ul

好吧可能我看的教程太老了的缘故

Gu1st · 发表于 2021-8-10 16:07

[CSS] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .red{
                color:red;
            }
        </style>
    </head>
    <body>
        子元素选择器  子指的是 亲儿子    孙子 重孙子  不算
        要求:
        1.让一级菜单的颜色变为红色
        <ul>
            <li class="red">一级菜单</li>
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul> 
            
        </ul>
    </body>
</html>

推荐直接套个class 或者加个span标签之类的

帐号		自动登录	找回密码
密码			注册[Register]

[求助] CSS3中的子元素选择器，无法正常使用？

免费评分