Question

如何让CSS只影响第一个列表（菜单项），而不是第二个列表？请帮忙。我整天都在这里。如果可以，请在回复中复制/粘贴完整代码。非常感谢！

Run.keepLog()

Answer 1

我只更改了两段代码。您将看到我在CSS中引用类.menu的位置以及我在您的放置导航列表中使用class="menu"的位置。

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-    type">
    <title></title>
    <style type="text/css">
	  ul {list-style: none;padding: 0px;margin: 0px;}
	  ul li {display: block;position: relative;float: left;border:1px solid #000}
	  li ul {display: none;}
	  ul li a {display: block;background: #000;padding: 5px 10px 5px     10px;text-decoration: none;
			   white-space: nowrap;color: #fff;}
	  ul li a:hover {background: #f00;}
	  li:hover ul {display: block; position: absolute;}
	  li:hover li {float: none;}
	  .menu li:hover a {background: #f00;}
	  li:hover li a:hover {background: #000;}
	  #drop-nav li ul li {border-top: 0px;}
	</style>
  </head>
  <body>
    <ul id="drop-nav" class="menu">
      <li><a href="#">Support</a></li>
      <li><a href="#">Web Design</a>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </li>
      <li><a href="#">Content Management</a>
        <ul>
          <li><a href="#">Joomla</a></li>
          <li><a href="#">Drupal</a></li>
          <li><a href="#">WordPress</a></li>
          <li><a href="#">Concrete 5</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">General Inquiries</a></li>
          <li><a href="#">Ask me a Question</a></li>
        </ul>
      </li>
    </ul> 
    <br>
    <br>
    <br>
    <ol>
      <li style="list-style-type: disc;"><a href="www.google.com">link1</a></li>
      <li style="list-style-type: disc;"><a    href="www.yahoo.com">link2</a></li>
    </ol>
  </body> 
</html>

Answer 2

CSS用于将鼠标悬停在其上时将链接更改为红色。只是想通过菜单列表链接发生这种情况。不是Google / Yahoo列表链接。

你有这个

li:hover a {background: #f00;}

将其更改为

ul li:hover a {background: #f00;}

这会将其与ol链接

区分开来

Answer 3

您可以提供html元素ID或类，id用于唯一元素，类用于更常见的元素。

在Css中，您可以为课程设置样式。对于你的问题，请遵循我在下面提出的想法：

第一行html元素给出了一个类

<ul href='#' class="headingItem></ul>

使用该类（Css）设置这些元素的样式：

.headingItem{
    Colour:blue
}

Answer 4

尝试使用CSS类。您只能定位具有该类的`元素：

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-    type">
    <title></title>
    <style type="text/css">
  ul.menu {list-style: none;padding: 0px;margin: 0px;}
  ul.menu li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul.menu li a {display: block;background: #000;padding: 5px 10px 5px     10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul.menu li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style></head>
  <body>
    <ul id="drop-nav">
      <li class="menu"><a href="#">Support</a></li>
      <li class="menu"><a href="#">Web Design</a>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </li>
      <li class="menu"><a href="#">Content Management</a>
        <ul>
          <li><a href="#">Joomla</a></li>
          <li><a href="#">Drupal</a></li>
          <li><a href="#">WordPress</a></li>
          <li><a href="#">Concrete 5</a></li>
        </ul>
      </li>
      <li class="menu"><a href="#">Contact</a>
        <ul>
          <li><a href="#">General Inquiries</a></li>
          <li><a href="#">Ask me a Question</a></li>
        </ul>
      </li>
    </ul> 
    <br>
    <br>
    <br>
    <ol>
      <li style="list-style-type: disc;"><a href="www.google.com">link1</a></li>
      <li style="list-style-type: disc;"><a    href="www.yahoo.com">link2</a></li>
    </ol>
  </body> 
</html>

Answer 5

将li:hover a {background: #f00;}更改为ul > li:hover a {background: #f00;}。 >表示Child或sub item。这将使您的导航链接（或ul > li标记中的其他链接）在悬停时变为红色。或者试试这个：#drop-nav > ul > li:hover a {background: #f00;}仅适用于您的导航器。

希望它有所帮助。

Answer 6

你应该用class或id命名你的第一个ul，然后使用这种形式的CSS selecor ul.class＆gt;李。这是达到第一级孩子的唯一方法。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            body {
                font-family: Arial;
                font-size: 14px;
            }

            ul {
                list-style-type: none;
                padding: 0;
            }

            ul.menu > li {
                background-color: red;
                float: left;
                position: relative;
                width: 100px;
                margin-right: 5px;
                padding: 5px;
            }

            ul.menu > li ul {
                position: absolute;
                top: 26px;
                left: 0px;
                display: none;
            }

            ul.menu > li:hover ul {
                display: block;
            }

            ul.menu > li ul li {
                width: 100px;
                padding: 5px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li>First
                <ul>
                    <li>Sub-First</li>
                    <li>Sub-Second</li>
                    <li>Sub-Third</li>
                </ul>
            </li>
            <li>Second</li>
            <li>Third
                <ul>
                    <li>Sub-First</li>
                    <li>Sub-Second</li>
                    <li>Sub-Third</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

只有1部分HTML的CSS

6 个答案: