Почему мой селектор 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>

Я использовал этот код, чтобы попытаться построить базовый сайт, где мой брат может поместить некоторые вещи, но у меня проблемы с боковым меню. Подпункты (с идентификатором submenu) должны быть меньше размера шрифта, чем более крупные элементы (без идентификатора).Почему мой селектор 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

первую очередь, если у вас есть более одного подменю следует использовать class вместо 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

идентификаторами являются уникальными

Каждый элемент может иметь только один идентификатор. Каждая страница может иметь только один элемент с этим идентификатором

классы НЕ являются уникальными

Вы можете использовать один и тот же класс на несколько элементов. Вы можете использовать несколько классов в одном элементе.

Использование class="submenu" вместо id="submenu"

источник

2016-12-25 14:17:44

Почему мой селектор css id не работает?

ответ

Смежные вопросы