CSS Нийлмэл сонгогч

Нийлмэл сонгогч нь олон сонгогчдын хоорондын иерархи (удамшлын ба эцэг-хүүгийн) хамаарлыг тодорхойлно.

div p (Descendant/Удам): <div> дотор байрлах БҮХ <p> tag-ийг сонгоно (хэдэн үеийн дотор байсан ч хамаагүй).
div > p (Child/Шууд хүү): зөвхөн <div>-ийн шууд доод үеийн (хүү) <p> tag-ийг сонгоно.
div + p (Adjacent Sibling/Чанх ард): <div>-ийн гадна талд чанх араас нь дагалдах ганц <p> элементийг сонгоно.
div ~ p (General Sibling/Ерөнхий дагавар): <div>-ийн дараа байрлах бүх ах дүү <p> элементүүдийг сонгоно.

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
div p {
    color: blue; /* div дотрох бүх p (удам) */
}
div > p {
    font-weight: bold; /* div-ийн шууд хүү p */
}
div + p {
    color: red; /* div-ийн чанх ард ирэх p */
}
</style>
</head>
<body>
<div>
    <p>Div дотор шууд байрлах p (bold + blue)</p>
    <div><p>Div дотор давхарлагдсан p (зөвхөн blue)</p></div>
</div>
<p>Div-ийн чанх ард ирэх p (улаан)</p>
<p>Дараагийн ах дүү p</p>
</body>
</html>

Туршиж үзэх »