如何在CSS中定位div内的ul/li菜单并设置样式？

首先注意到你的HTML里div的id写了id="=cont"，这应该是笔误吧？正常ID不建议以等号开头（虽然浏览器可能兼容，但不符合规范），我先假设是id="cont"来讲解，要是你确实要保留这个特殊ID，后面会补充对应的写法~

一、CSS选择器定位目标元素 #

要选中<section id="main">里<div id="cont">内的ul和li，有几种实用的选择器方式：

1. 完整层级选择器 #

这种方式最直观，顺着DOM层级写，不会选错元素：

/* 选中cont下的第一层ul */
#main #cont ul {
  /* 样式代码 */
}

/* 选中cont下第一层ul里的li */
#main #cont ul li {
  /* 样式代码 */
}

/* 选中子菜单里的第二层ul */
#main #cont ul li ul {
  /* 子菜单ul样式 */
}

/* 选中子菜单里的li */
#main #cont ul li ul li {
  /* 子菜单li样式 */
}

2. 简化选择器（利用ID唯一性） #

因为ID在页面中是唯一的，所以可以直接用#cont定位，不用写前面的#main，更简洁：

#cont ul {
  /* 第一层ul样式 */
}

#cont ul li {
  /* 第一层li样式 */
}

#cont ul li ul {
  /* 子菜单ul样式 */
}

3. 子选择器（仅选直接子元素） #

如果只想选#cont的直接子级ul（而非更深层的嵌套ul），可以用>子选择器：

#cont > ul {
  /* 仅#cont直接子元素的ul */
}

#cont > ul > li {
  /* 仅第一层ul的直接子li */
}

二、示例菜单样式（含下拉子菜单） #

这里给你一个常见的横向下拉菜单样式示例，你可以根据需求调整细节：

/* 重置列表默认样式 */
#cont ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 主菜单横向排列 */
  background-color: #333;
}

/* 主菜单li基础样式 */
#cont ul li {
  position: relative; /* 为子菜单绝对定位做准备 */
  padding: 12px 20px;
  cursor: pointer;
}

/* 主菜单链接样式 */
#cont ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

/* 子菜单默认隐藏 */
#cont ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  display: none;
  flex-direction: column; /* 子菜单纵向排列 */
  min-width: 200px;
}

/* 鼠标悬停主菜单li时显示子菜单 */
#cont ul li:hover ul {
  display: flex;
}

/* 子菜单li样式 */
#cont ul li ul li {
  padding: 10px 15px;
  border-bottom: 1px solid #555;
}

/* 子菜单链接hover效果 */
#cont ul li ul li a:hover {
  color: #ffd700;
}

三、特殊ID的处理（如果保留id="=cont"） #

要是你确实要使用id="=cont"这个特殊ID，CSS里需要转义等号，写法如下：

#main #\=cont ul {
  /* 样式代码 */
}

不过还是建议把ID改成正常的cont，避免不必要的兼容性或书写麻烦。

内容的提问来源于stack exchange，提问作者Daeto