Изменение цвета шрифтов в DIV (CSS)

Я пытаюсь изменить цвет и размер шрифта H2 и шрифтов H2 link на основе div, в котором они находятся, но не были успешными. Что я делаю не так?

 <style>
h2 {
color:fff;
font-size: 20px;
}
social.h2 {
color:pink;
font-size: 14px;
}
social.h2.h2color {
color:purple;
font-size: 10px;
}
tv.h2 {
color:green;
font-size: 14px;
}
tv.h2.h2color {
color:orange;
font-size: 10px;
}
 </style>

 <h2>List of Companies </h2>
 <div class="social">

 <h2>     <A href="#" onclick="location.href='http://www.facebook.com'; return false;">Facebook     </a>
 <span class="h2color">Found in 2004     </span>     </h2> 
 blah blah blah 

 <h2>     <A href="#" onclick="location.href='http://www.twitter.com'; return false;">Twitter     </a>
 <span class="h2color">Found in 2007     </span>     </h2>
 blah blah blah 

 </div>


 <div class="tv">

 <h2>     <A href="#" onclick="location.href='http://www.fox.com'; return false;">Fox     </a>
 <span class="h2color">Found in 2004     </span>     </h2> 
 blah blah blah 

 <h2>     <A href="#" onclick="location.href='http://www.nbc.com'; return false;">NBC     </a>
 <span class="h2color">Found in 2007     </span>     </h2>
 blah blah blah 
 </div>

Я пытаюсь сделать так:

enter image description here

Ответы

Ответ 1

Ваш первый CSS-селектор social.h2 - ищет "социальный" элемент в классе "h2", например:

<social class="h2">

Селектора классов проходят с точкой (.). Кроме того, используйте пробел (), чтобы указать, что один элемент находится внутри другого. Чтобы найти потомок <h2> элемента в классе social, попробуйте что-то вроде:

.social h2 {
  color: pink;
  font-size: 14px;
}

Чтобы лучше понять селектор CSS и как они используются для ссылки на ваш HTML, я предлагаю пройти через интерактивные учебники HTML и CSS из CodeAcademy. Я надеюсь, что это поможет вам в правильном направлении.

Ответ 2

Чтобы сделать ссылки, вы можете сделать

.social h2 a:link {
  color: pink;
  font-size: 14px;   
}

Вы также можете изменить стиль наведения, посещения и активного стиля ссылок. Просто замените "ссылку" на то, что вы хотите стилизовать. Вы можете узнать больше на странице w3schools Ссылки CSS.