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

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

CSS3中的子元素选择器，无法正常使用？代码如下：
<!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>
我想让一级菜单变成红色，二级菜单不变色，请问怎么修改呢？这个效果如下：

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

1. li的位置好像不太对
2. 两个ul不能区分吧
修改后：
<!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样式效果

         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

<!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标签之类的

页: [1]

吾爱破解 - 52pojie.cn's Archiver

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