Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "CSS derivative selector how to understand", the content is detailed, the steps are clear, the details are handled properly, I hope this "CSS derivative selector how to understand" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Derived selector, whose name is unknown at first glance, is also known as context selector, which uses the document DOM structure to make css selection. The DOM structure is not going to go into detail here, but to illustrate the problem more clearly, we give a DOM tree here as a reference:

(1) descendant selector (descendant selector)

As shown in the figure above, if you want to select all the sub-elements of the body element, the method is as follows:

Body li {...}

Here all the descendants of li, that is, all the li under the body in the figure, will be selected, regardless of the number of algebra separated between them. Similarly, if you want to select span under the H2 element, you can use the following code:

H2 span {...}

If we want to select li descendants with elements of the warning class, we can use the following method: .warning li {.}

Of course, if you want to select only li descendants who have div elements of the warning class, you can write: div.warning li {.}

From the above example, it is not difficult to see that the rule of descendant selectors is to connect two or more selectors with spaces. The meaning of the space is:... The descendants of. The situation for multiple selectors is as follows: ul li li {...}

In this way, all the li elements contained under the li element under all ul will be selected, which sounds like a mouthful. Referring to our DOM tree, we will select the last row of li elements in the document tree.

(2) Child element selector (child selector)

The child element selector is different from the descendant selector. It can only select the direct descendants of an element, not across generations. The usage is as follows: ul > li {.}

Connect the two child elements with a greater than sign >. The above code selects the direct li child elements of all ul elements. Corresponding to the DOM tree, all li elements are selected because all li elements in the diagram are child elements of ul.

However, the following code will not select any elements: H2 > span {...}

Because span is the "grandchild element" of H2, H2 does not have a direct sp child element, so the above code will not select any results. Other aspects are similar to descendant elements, except that child element selectors cannot be selected from generation to generation.

(3) neighboring sibling selector (Adjacent sibling selector)

The neighboring sibling selector, hence the name thought, will select the neighboring sibling elements of an element, notice that it selects adjacent sibling elements rather than all sibling elements, and actually selects the sibling elements that follow.

The neighbor sibling selector has a good application in practice, for example, you want to apply some unique style to the paragraph after an h3 heading, or you want to add an extra margin to some kind of table where the p paragraph lags behind, and so on. Its usage is as follows:

Li + li {...}

The above code will select all the li elements as adjacent li elements, which sounds like a bit of a mouthful. Referring to the DOM tree, it will select the other four li elements except the first li element, because the two li elements in the first place do not have a sibling element to select it.

Another example: H2 + p {.} selects all p sibling elements immediately following H2. H2.warning + p {...} selects the p sibling element immediately following the H2 element of all useful warning classes.

(4) the combined use of several derived selectors

In fact, several of the derived selectors described above can be used in combination, as shown in the following example:

Html > body li.warning + li {...}

The above selector means that among the html child elements of the li element, all the neighboring siblings of the Boy element that have the warning class.

After reading this, the article "how to understand the CSS derivative selector" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.