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

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

When we are coding, we often encounter the need to add or delete styles to the first or last element, and some special ones are to select which elements to add or delete styles. The following records the usage of common selectors in css selectors: neighbor sibling selector (+), sub-selector (>), sibling selector (- -), first-child,: last-child,: nth-child (),: nth-last-child ().

Neighbor sibling selector (+)

The adjacent sibling selector can select the element immediately after another element, and both have the same parent element. Note: like the child combinator, there can be a blank character next to the neighboring sibling combinator.

The device.

If you have any questions in your study, you can contact me at any time to share the actual operation of the Internet web front-end with you. No matter whether you have a foundation or not, I welcome it. Point: front-end technology sharing

Neighboring sibling selector

H _ 2j _ p {

Color:red

}

Hello word!

Hello word!

Hello word!

Hello word!

Hello word!

Hello word!

Hello word!

The effect picture is as follows:

Brothers will only affect the style of the p tag below, not the style of the brothers above.

Note that the meaning of'+ 'here is different from that of' and'. The style of the sibling selector is applied to the sibling element and has nothing to do with the style of the referenced element. for example, the above example only affects the style of the p element and does not affect the style of the H2 tag.

Of course, this also loops, that is, when two sibling elements are the same, it loops again:

Example:

Li + li {

Color:red

}

List item 1

List item 2

List item 3

You can see that the first li font color does not turn red, and the second and third element fonts turn red, which is because the third li is a sibling of the second li, so styles are also applied.

Brother selector (-)

The function is to find all sibling nodes that follow a specified element.

Sample code:

H2-p {

Color:red

}

one

two

three

four

five

Effect display:

Descendant selector (including selector)

You can select elements for the descendants of an element (descendant elements)

Sub-selector (>)

You can only choose elements that are the son of an element, excluding grandchildren, great-grandchildren, and so on.

Examples of the combination of descendant selector, subselector, and neighboring sibling selector:

Take a look at the selector below:

Html > body table + ul {margin-top:20px;}

This selector is interpreted as selecting the first neighboring sibling ul element that appears immediately after the table element, which is contained in a body element, and the body element itself is a child of the html element.

First-child selector

Li:first-child

{

Background:yellow

}

Coffee

Tea

Coca-Cola

Coffee

Tea

Coca-Cola

Effect picture

It is worth noting that if the first element (p) of its parent element is not the specified type element (li), the first element will not have a style.

Li:first-child

{

Background:yellow

}

test

Coffee

Tea

Coca-Cola

Effect picture

Last-child selector

The last-child selector matches each element that belongs to the last child element of its parent.

Hint: p:last-child is equivalent to p:nth-last-child (1).

Eg: specifies the background color of the p element that belongs to the last child element of its parent element:

P:last-child

{

Background:#ff0000

}

This is the title.

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

The fifth paragraph.

Effect:

Note: the parent element of the p tag is the last p element in the body,body tag is the fifth paragraph

: nth-child ()

: nth-child () selector, which selects the Nth child element of the parent element, regardless of type.

P:nth-child (2)

{

Background:#ff0000

}

This is the title.

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Note: Internet Explorer does not support the: nth-child () selector.

Detailed usage of nth-child ()

Nth-child (3) indicates the third element in the selection list.

Nth-child (2n) represents an even number of tags in the list, that is, select 2nd, 4th, 6th. Label

Nth-child (2n-1) represents the odd tag in the selection list, that is, select 1st, 3rd, 5th, 7th... Label

Nth-child (nasty 3) indicates that the label in the selection list starts from the 3rd to the end (> = 3)

Nth-child (- nasty 3) indicates that the tags in the selection list range from 0 to 3, that is, tags less than 3 (

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.