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

This article will explain in detail what derivative selectors there are in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

There are three kinds of derived selectors in css: 1, descendant selector, syntax "EF {style code}"; 2, child element selector, syntax "E > F {style code}"; 3, adjacent sibling selector, syntax "E + F {style code}".

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

Derived selector of CSS (context selector)

Selector is a very important part of knowledge in CSS.

According to my superficial understanding for the time being, CSS is to apply various styles to the elements in a piece of HTML code.

So, the first step is to pinpoint the elements you want to use the style.

CSS uses various selectors to locate elements. There are many kinds of selectors in CSS. Today I just want to talk about "derived selectors".

Hearing the name "derivative selector", I really can't feel what kind of selector it is. It is called "contextual selectors" in English, but it is called "context selector" if it is translated literally. Although the name is not elegant, I prefer this name.

Contexual selector defines styles based on the contextual relationship of elements in their locations.

There are three cases of context selector: descendant selector, child element selector, and neighboring sibling selector.

Descendant selector (descendant selector)

Eg:

HTML Code:

This is aimportantheading

CSS Code:

H2 em {color:red;}

The syntax rule is that there is a space between H2 and em. Then this CSS code will be applied to all elements contained in the tag.

With regard to descendant selectors, it is important that the algebra between the first parameter and the second parameter can be infinite.

Eg:

HTML Code:

This will be styled. This will be styled too.

CSS Code:

Ul em {color:red;}

The above css style will be applied to two orange elements in the HTML code.

Sub-selector (child selector)

The child selector selects only the child elements of an element and does not expand to any descendant elements.

Eg:

HTML Code:

This is This will be styled. Important.This is really This will not be styled. Important.

CSS Code:

H2 > strong {color:red;}

The syntax rule is that there will be a ">" symbol between H2 and strong. The space between this ">" and the preceding H2 or the subsequent strong is optional.

In the above example, in the first line of HTML code, the element is a child of, and all H2 > strong selectors will select it.

In the second line of HTML code, not the child element, but the grandson, all H2 > strong selector will not choose it.

Neighbor sibling selector (Adjacent sibling selector)

The neighboring sibling selector selects an element that follows, but only if they have the same parent.

Eg:

HTML Code:

This is a heading This will be styled. This will not be styled.

CSS Code:

H3 + strong {color:red;}

The grammatical rule is that there is a "+" between h3 and strong, "+" and the space between the preceding H2 or the subsequent strong is optional.

In the above example, the first strong is next to H3 and they have the same parent (H2), so H3 + strong chooses the first instead of the second.

Eg2:

HTML Code:

List item 1 List item 2 List item 3 List item 1 List item 2 List item 3

CSS Code:

Li + li {color:red;}

In the above example, li+li is the first one that is chosen immediately after the li, so the first one will not be selected, while the second one is next to the first li, all will be selected, and the third one will be next to the second one and will also be selected.

This is the end of this article on "which derivative selectors are in css". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.