爲什麼我的CSS ID選擇器不工作？

<!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）。爲什麼我的CSS ID選擇器不工作？

我試圖讓這個所以通過添加以下到我的樣式表：

#submenu { 
font-size: 18px; 
}

這應該比別人，這是設置爲較小的子菜單項：

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

有任何可以想象的理由，這不起作用？我使用chrome來測試它，而其他一切似乎都正常。

來源

2016-12-25 Luc Wiegers

首先，如果你有一個以上的子菜單中，您應該使用類而不是id。 ID用於頁面中的獨特元素 –

這裏是你使用過的ID類工作示例

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

<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>

來源

2016-12-25 14:25:42

ID是唯一的

每個元素只能有一個ID。每個頁面只能有一個元素與ID

類是不是唯一的

您可以使用多個元素同一類。您可以在同一元素上使用多個類。

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

來源

2016-12-25 14:17:44

爲什麼我的CSS ID選擇器不工作？

回答

相關問題