How many types of css context selectors are there?

This article mainly introduces how many types of css context selector, the article is very detailed, has a certain reference value, interested friends must read it!

There are four types of css context selector: 1, descendant selector, which can select all descendant elements of the current element; 2, parent-child selector, which can select all children of the current element; 3, sibling adjacent selector, which can choose elements with a common parent and adjacent elements; 4, sibling selector, which can select all subsequent elements with a common parent.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Context selector for css

A context selector is a set of elements that make up a "parent-son" or hierarchical relationship and set the style through their relationship.

Html documents look like an inverted "tree", so they are hierarchical.

Each element, in the document, has its own place, that is, the context

Therefore, elements can be obtained according to their contextual relationship.

Four roles of an element

Serial number role description 1 ancestor element has child element, descendant element of all levels such as Sun element 2 parent element has only child element level element 3 descendant element has common ancestor element 4 child element has common parent element with other sibling elements

Four context selectors

Ordinal selector operator description example 1 descendant selector space select all descendant elements of the current element div p, body * 2 parent-child selector > select all children of the current element div > H33 sibling adjacent selector + select li.red + li4 sibling all selector ~ select all subsequent elements with a common parent li.red ~ li

Example

Context selector .container {width: 300px; height: 300px; display: grid; grid-template-columns: repeat (3, 1fr); gap: 5px;} / * Class selector * / .item {font-size: 2remt; background-color: lightskyblue; display: flex; justify-content: center Align-items: center;} / * descendant selector * / .container div {border: 1px solid coral;} / * parent-son selector, only the outer div is affected * / body > div {border: 3px solid green } / * use descendant selector to simulate parent-child selector * / / * body div.container {border: 3px solid green;} * / * sibling neighbor selector * / / * Select the fifth adjacent element * / / * .item.center + .item {background-color: lightgreen } * / / * all selectors of the same level * / / * Select all sibling elements that follow the fifth and have a common parent * / .item.center ~ .item {background-color: lightgreen } 1, 2, 3, 4, 5, 6, 7, 8, 9 and above are all the contents of the article "how many types of css context selectors are there?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!