내 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

이 있습니까

나는 내 스타일 시트에 다음을 추가하여 그래서이 만들려고 이게 효과가없는 생각할만한 이유가 있습니까? 나는 그것을 테스트하기 위해 크롬을 사용하고 있으며 다른 모든 것은 잘 작동하는 것처럼 보인다.

출처

2016-12-25 Luc Wiegers

먼저 하나 개 이상의 하위 메뉴가있는 모든 경우에 사용해야의 id 대신 클래스. ID는 페이지의 고유 한 요소에 사용됩니다. –

의 class="submenu"는 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로 하나의 요소를 가질 수 있습니다. 동일한 요소에 대해 여러 클래스를 사용할 수 있습니다.

사용하는 대신 여기에 id="submenu"

출처

2016-12-25 14:17:44

내 CSS ID 선택기가 작동하지 않는 이유는 무엇입니까?

답변

관련 문제