Изменить цвет линии hr

Question

Это мой сайт .. Мне нужна эта строка в третьем разделе, чтобы быть черным. Я использовал тег hr и стилизовал его как белый на css, потому что страница после него мне нужна в белом цвет? так как же я их стиль по-разному? Извините, я новичок в html/css!

Пожалуйста, помогите!

http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/

<div id="con2"> 

<div id="box3"> 
<span class="fontheading">RESEARCH, PLAN AND SAVE </span> <br><hr /><br> 
<span class="font1"> You&#39;ll collect all of <br>your favourite <br> 
Amalfi activities <br>and attractions <br>in one place </span> 
<br><br><span class="font2">Just sign up<br>for your free<br>account 
<a href="#">here</a></span> 
</div> 
</div> 

CSS

hr { width:100%; height:1px; background: #fff } 

Answer 1

<hr> использует border, а не background-color. Фактически, у нее есть граница со всех сторон. Я обычно переопределить это, установив border-width: 0px; перед установкой border-bottom-* свойства

hr { 
    border-width: 0px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #FFF; 
} 

как я их стиль по-разному?

Добавить класс <hr> тег, который вы хотите изменить.

<hr class="white"> 

Затем применить CSS к этому классу только

hr.white { 
    border-width: 0px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #FFF; 
} 

Вы можете изменить количество пространства <hr> тег принимает вертикально вверх, изменяя значение line-height свойства.

hr.white { 
    line-height: 1px; 
    border-width: 0px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #FFF; 
} 

Answer 2

Добавить разные классы для разных hr тегов, например: <hr class='hr-black'/> Затем измените цвет в CSS.