css - CSS。単一位置の境界線

Question

画像付きで解説していきます。リンク。画像にボーダー位置1を追加しようとすると。2 と 3 に自動的に追加されます。コード:border-bottom: 1px dotted rgb(153, 153, 153)ホエーはスタイル シートの同じ行にあります。位置 1 のみに境界線を追加する方法はありますか。

Answer 1

div.divclass:first-child {border-bottom: 1px dotted rgb(153, 153, 153)}

また

div.divclass:nth-child(1) {border-bottom: 1px dotted rgb(153, 153, 153)}

編集

または、クラスを使用したくない場合は、DOM 構造を使用して DIV をターゲットにすることができます。

/* Where the second "div" is the element you want to apply the style to */
div > div:first-child {/* Enter style here */}

Answer 2

使用できる時間:

hr {
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width:50%;
}