Question

如何在CSS中访问div内的ul和li菜单？

<section id="main">
            <div id="=cont">
                <ul>
                    <li><a href="about.html"> Our Hitory </a>
                        <ul>
                            <li><a href="index.html"> The Foundation </a></li>
                            <li><a href="about.html"> Our Founders </a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="about.html"> Our Company </a>
                        <ul>
                            <li><a href="index.html"> Our Business Practices </a></li>
                            <li><a href="about.html"> Our Brokers </a></li>
                        </ul>
                    </li>

               </ul>
           </div>

我在css中尝试过这么多组合，但似乎无法访问该菜单并对其进行样式化。

非常感谢！

Answer 1

这是程式化的一个例子取自：http://www.java2s.com/Code/HTMLCSS/Tags/SettingstyleforULinsideaDIV.htm

＆＃13;

#footer ul {
  width: 1000px;
  text-align: center;
}
#footer li {
  display: inline;
  list-style-type: none;
  line-height: 44px;
}
#footer li a {
  color: #574621;
  text-decoration: none;
  margin: 0 10px;
}
#footer li a:visited {
  text-decoration: none
}
#footer li a:hover {
  text-decoration: underline
}

＆＃13;

?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
  <div id="footer">
    <ul>
      <li><a href="#">Home</a>|</li>
      <li><a href="#">About our Hotel</a>|</li>
      <li><a href="#">Services</a>|</li>
      <li><a href="#">Photogallery</a>|</li>
      <li><a href="#">Testimonials</a>|</li>
      <li><a href="#">Locations</a>|</li>
      <li><a href="#">Contacts</a></li>
    </ul>

  </div>  
  
</body>

</html>

＆＃13;

Answer 2

要与标签对话，您可以在CSS表格中使用

之类的内容

示例1：

  .id ul li {
     your Css Code
  }
  /* in your case  */
  .cont {
    position: ...;
  }

  /* Or for deeper Tags  
  * for example:
  */

 .cont ul li a {
     position: ...;
 }

或者那是一个糟糕的Programmingstyle

示例2：

 <li style="color:green"><a href="about.html"> Our Hitory </a>

还有第三个选项可以将css代码放在head标签的样式标签中，如示例1所示

示例3：

 <head> 
 <style>
 <!-- Code from Example 1 -->
 </style>
 </head>

希望我能帮到你！

如果您还有任何疑问，请询问。

祝你好运

Answer 3

<div id="=cont">将您的错误更改为<div id="cont">，这是错误的

#cont > ul{
  list-style-type: none;
}

#cont > ul li{
 padding: 10px;
 background: green;
}

#cont >ul li ul{
  list-style-type: none;
}

#cont >ul li ul li{
  padding: 10px;
  background: black;
}

    
    
    <section id="main">
                <div id="cont">
                    <ul>
                        <li><a href="about.html"> Our Hitory </a>
                            <ul>
                                <li><a href="index.html"> The Foundation </a></li>
                                <li><a href="about.html"> Our Founders </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="about.html"> Our Company </a>
                            <ul>
                                <li><a href="index.html"> Our Business Practices </a></li>
                                <li><a href="about.html"> Our Brokers </a></li>
                            </ul>
                        </li>
    
                   </ul>
               </div>
    </section>

在div中设置菜单样式

3 个答案: