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

This article mainly introduces how to use the CSS3 brother selector, the article is very detailed, has a certain reference value, interested friends must read it!

Css3 sibling selector syntax: 1, "+" sibling selector, syntax for "specified element + select element {css code}", the selector represents the selection of an element after the adjacent sibling element; 2, "~" sibling selector, syntax for "specify element ~ select element {css code}", the selector represents all sibling specified elements after an element.

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

What is the syntax of the CSS3 brother selector

CSS3 sibling selector (+, ~)

The sibling selector is used to select sibling elements that are in the same parent element as an element and after that element. Brother selector can be divided into two types: adjacent brother selector and ordinary brother selector. The explanation for them is as follows.

1. Neighboring brother selector

The selector uses the plus sign "+" to link the two selectors before and after. The two elements in the selector have the same parent, and the second element must follow the first element.

The following is a case study to demonstrate the use of the nearby sibling selector.

CSS3 is next to Brother Selector usage-http://web.itheima.com p + h3 {color: green; font-family: "Song style"; font-size: 20px;} "Gift Wang Lun"

Li Bai is getting ready to travel by boat.

Suddenly I heard the singing with the pedal as the beat on the shore.

The water of Peach Blossom Pool is thousands of feet deep.

It's not as affectionate as the one Wang Lun gave me.

In the above code, lines 7 through 11 are used to define the style for the first sibling element h3 immediately after the p element. You can see from the structure that the position of the first sibling element immediately after the p element is line 17, so the text content of line 17 will be displayed in the defined style.

As you can see from the figure, only the H3 element immediately following the p element applies the style set in the code.

two。 Ordinary brother selector

The normal sibling selector uses "~" to link the two selectors before and after. Finds all sibling nodes that follow a specified element.

The following example demonstrates the use of the ordinary sibling selector, as shown below.

CSS3 ordinary Brother Selector ~ usage-http://web.itheima.com p ~ h3 {color: pink; font-family: "Microsoft Yahei"; font-size: 20px;} "Gift Wang Lun"

Li Bai is getting ready to travel by boat.

Suddenly I heard the singing with the pedal as the beat on the shore. The water of Peach Blossom Pool is thousands of feet deep, which is not as affectionate as the affection given to me by Wang Lun.

As you can see from the figure, all the sibling elements h3 after the p element apply the style set in the code.

The above is all the contents of the article "how to use the CSS3 Brothers Selector". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.