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

This article mainly introduces the relevant knowledge of "how html5 uses the descendant selector". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how html5 uses the descendant selector" can help you solve the problem.

In the process of project development, many of the same tags may be used in the same document, or many of the same class names may be used, which leads to the problem that html selectors are not easy to use in development. If all id selectors are used, it does not conform to the effect of semantics. At this point, we can use the descendant selector.

First of all, there are two kinds of selectors in html that can select descendants, one is the child element selector, the other is the descendant selector, the two selectors are different in the selection mode.

Descendant selector

Mode of use:

/ * descendant selector can use elements with parent-child relationship to select (at least two). In addition, each child element can be expressed as a tag, or as a class name, id, pseudo class, etc., to express * / element1 element2 element3 {style;}

Note: descendant selectors are actually composed of multiple selectors separated by spaces.

As long as one element is a child of another (or a child of a child).

As an example in the above figure, to select the li element, you can use the following ways:

/ * abbreviated as content ul li {} can also be * / .content .model ul li {style:}

Child element selector

Mode of use

/ * the child element selector uses at least two elements with a direct parent-child relationship. In addition, each child element can be expressed as a tag, or as a class name, id, pseudo-class, etc. * / element1 > element2 > element3 {style;}

Note: child element selectors are actually composed of multiple selectors separated by >.

The child element selector requires a direct parent-child relationship between two adjacent elements (that is, the child elements of the child elements cannot be used). In the case of a later generation selector, you can use .content > .model > ul > li or .model > ul > li, but not .content > ul > li.

That's all for "how html5 uses the descendant selector". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.