使用 CSS 更改 html 列表和嵌套列表的颜色-解网

问：

我在查找可以解决我的问题的信息时遇到了麻烦。

我有一个列表，其中嵌套了其他列表的子元素<ul><li>

悬停时需要将元素的颜色更改为蓝色，但最后一个元素在悬停时需要将颜色更改为橙色。<li>

问题是我无法改变父母的颜色，不确定我是否解释得很好。<li>

元素 Element1、Element2 在悬停时必须为蓝色，元素 3 在悬停时也必须为橙色。

不评论您无法编辑 html（即添加类属性）是我的错。

感谢您抽出宝贵时间接受采访！

代码如下：

body {
  font-family: sans-serif;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

ul li ul li:hover {
  color: blue
}

ul li:last-child ul li:hover {
  color: orange
}

<html lang="en>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>List and lists colors</title>
</head>

<body>
  <ul>
    <li>
      <span href="">Element 1</span>
      <ul>
        <li>
          <span href="">Element 1.1</span>
        </li>
        <li>
          <span href="">Element 1.2</span>
        </li>
        <li>
          <span href="">Element 1.3</span>
        </li>
      </ul>
    </li>
    <li>
      <span href="">Element 2</span>
      <ul>
        <li>
          <span href="">Element 2.1</span>
        </li>
        <li>
          <span href="">Element 2.2</span>
        </li>
        <li>
          <span href="">Element 2.3</span>
        </li>
      </ul>
    </li>
    <li>
      <span href="">Element 3</span>
      <ul>
        <li>
          <span href="">Element 3.1</span>
        </li>
        <li>
          <span href="">Element 3.2</span>
        </li>
        <li>
          <span href="">Element 3.3</span>
        </li>
      </ul>
    </li>
  </ul>
</body>

</html>

HTML CSS 列表嵌套悬停

使用 CSS 更改 html 列表和嵌套列表的颜色

Change color of html lists and nested lists with CSS

评论

评论