Question

<!DOCTYPE html>
<html>

<head>
    <title>ARACHNID-HUB</title>
    <meta name="description" content="A place to log the growth and activity of my dear darlings.">
    <link type = "text/css" rel="stylesheet" href="my.css">
    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Pacifico">
    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Dancing+Script">
</head>

<body>
    <div class= 'header'>
        <b>ArachHub</b>
    </div>
    <div class = 'lefty'>
        <nav>
             <ul>
            <li><a href="ArachHub.html">Home</a></li>
            <ul id='submenu'>
                <li ><a href='ArachHub.html#Welcome' id='submenu'>Home</a></li>
                <li ><a href='ArachHub.html#AboutMe' id='submenu'>About me</a></li>
            </ul>
            <li><a href="ArachLiving.html">Living thingys</a></li>
            <ul id='submenu'>
                <li ><a href='ArachLiving.html#AllThingsL' id='submenu'>All Things living</a></li>
                <li ><a href='ArachLiving.html#AnotherH' id='submenu'>Paragraph 2</a></li>
            </ul>
            <li><a href="ArachDead.html">Dead thingys</a></li>
            <ul>
                <li ><a href='ArachDead.html#AllThingsD' id='submenu'>All Things Dead</a></li>
                <li ><a href='ArachDead.html#AnotherH2' id='submenu'>Another Par 2</a></li>
            </ul>
             </ul>
        </nav>
    <p id=inbetween>Arachnid pets</p>
        <img id = Glamour src="http://arachnoboards.com/gallery/0-1-brachypelma-albopilosum.7342/full">
        <img id = Glamour src="http://www.mikebasictarantula.com/Pamphobeteus_sp._platyomma__3_.JPG">
        <img id = Glamour src="http://i.dailymail.co.uk/i/pix/2016/04/15/12/3334938200000578-3541749-image-a-24_1460721359328.jpg">
        <p id=inbetween>Non-Arachnid pets</p>
        <img id = Glamour src="http://www.mosta2bal.com/vb/lyncache/3/30922wall.jpg">
        <img id = Glamour src="http://www.queenies.nl/images/photos/IMG_5806.jpg">
        <img id = Glamour src="https://upload.wikimedia.org/wikipedia/commons/b/b7/George,_a_perfect_example_of_a_tuxedo_cat.jpg">
    </div>
    <div class="main">
    <a class="anchor" id="Welcome"></a>
        <h1>Welcome to ArachHub!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices imperdiet purus, non rhoncus nulla posuere eget.</p>
    <a class="anchor" id="AboutMe"></a>
   <h2>About me</h2>
<p>Fusce sed ante pellentesque, ullamcorper mauris congue, dapibus ligula. Sed id porta ipsum. Proin ac quam interdum, mollis nibh id, fermentum sapien. </p>
    </div>
</body>
</html>

我使用这段代码尝试构建一个基本站点，我的兄弟可以放一些东西，但是我遇到了侧边菜单的问题。子项（ID为submenu）的字体大小应小于较大的项目（不含ID）。

我尝试通过在样式表中添加以下内容来实现此目的：

#submenu {
font-size: 18px;
}

应该使子菜单项小于其他项，设置为：

a {
text-align: left;
font-family: Pacifico;
padding-top: 0px;
font-size: 26px;
margin-top: 0px;
color: #000000

这有什么可行的理由不起作用吗？我正在使用chrome来测试它，其他一切似乎都能正常工作。

Answer 1

ID是唯一的

每个元素只能有一个id。每个页面只能有一个具有该ID的元素

类不是唯一的

您可以在多个元素上使用相同的类。您可以在同一元素上使用多个类。

使用class="submenu"代替id="submenu"

Answer 2

这是一个使用id

的类的工作示例

＆＃13;

.submenu{
  font-size: 8px
}
a{
  font-size: 20px
}

＆＃13;

 <nav>
   <ul>
     <li><a href="#">Home</a></li>
     <ul class='submenu'>
       <li ><a href='#' class='submenu'>Home</a></li>
       <li ><a href='#' class='submenu'>About me</a></li>
     </ul>
     <li><a href="#">Living thingys</a></li>
     <ul class='submenu'>
       <li ><a href='#' class='submenu'>All Things living</a></li>
       <li ><a href='#' class='submenu'>Paragraph 2</a></li>
     </ul>
     <li><a href="#">Dead thingys</a></li>
     <ul>
       <li ><a href='#' class='submenu'>All Things Dead</a></li>
       <li ><a href='#' class='submenu'>Another Par 2</a></li>
     </ul>
   </ul>
</nav>

＆＃13;

为什么我的css id选择器不起作用？

2 个答案: