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

This article mainly explains "how to use css3 relationship selector". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use css3 relationship selector.

There are four kinds of css3 relation selector: 1, including selector "E F", selecting all F elements contained by E element; 2, descendant selector "E > F", selecting all direct child elements as E elements, and selecting F element immediately after E element; 4, sibling selector "Eternal F".

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

The relational selector in CSS3 mainly includes include selector, descendant selector, adjacent selector and sibling selector:

The containing selector is connected by a symbol space ""

The descendant selector is connected by the symbol ">"

Adjacent selectors are connected by the symbol "+"

The brother selector is connected by the symbol "~"

We will explain it in detail below.

Include selector (E F)

Select all F elements contained in the E element, separated by a space

Ul li {color:green;} BMW Mercedes-Benz Audi

CSS3 descendant selector (E > F)

The child selector is mainly used to select the first-level child elements of an element. For example, if you want to select a strong element that is only a child of H2 elements, you can write: H2 > strong.

The following example demonstrates the use of the child selector (>), as shown in the figure:

CSS3 descendant selector usage H2 > strong {color: red; font-size: 20px; font-family: "Microsoft Yahei";} this knowledge point is very important. Welcome to PHP Chinese website!

In the above code, the strong element in line 15 is the child element of the H2 element, and the strong element in line 16 is the grandelement of the H2 element, so the style set in the code is only valid for line 15.

CSS3 Brothers Selector (eBay F)

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 neighboring sibling selector usage p + h3 {color: green; font-family: "Song style"; font-size: 20px;} "Gift Wanglun"

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.

CSS3 adjacency selector (eBay F)

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 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.

Thank you for reading, the above is the content of "how to use css3 relationship selector", after the study of this article, I believe you have a deeper understanding of how to use css3 relationship selector, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.