cssのセレクタが重複している場合

Question

たとえばcssで下記のような異なるデザインのラインを引きたい場合セレクタの部分はどう書き分ければいいのでしょうか。

hr {
border-top: 1px solid #bbb;
}

hr {
border-top: 3px double #bbb;
}

Answer 1

classで分けるとか

<style>
hr {
border-top: 1px solid #bbb;
}

hr.other {
border-top: 3px double #bbb;
}
</style>
<hr>
<hr class="other">