CSS selector description-link selector and css selector description

CSS selector description-link selector and css selector description

Original article: http://www.chinaz.com/web/2012/1017/278553.shtml

 

I believe everyone is familiar with CSS selector. The selector includes element selector, link selector, attribute selector, pseudo class selector, and pseudo object selector. Among the many choices, we can flexibly choose the appropriate choices according to our own needs to write the style, to achieve the maximum quality and efficiency.

Today, we will introduce the relationship selector in the selector. "relationship" is a major event of the same level. We have to make it clear that we can do this more efficiently. Otherwise, you will suffer in CSS, haha. Link selector has four categories: selector, subselector, adjacent selector, and sibling selector. Next we will introduce them one by one. Here, I would like to explain in particular that the most common part is the inclusion of the selector. Why are we used to this? In IE 6, only the selector is supported. In the past (now a little changed), IE6 is the main character in the browser market and has a high user coverage rate. Therefore, for those that IE6 does not support, it will inevitably cause us to seldom use or even never use it at all. But I remember from an article that HTML5/CSS3 is a trend in the future, and HTML5/CSS3 will pay attention to the use of tags we mistakenly thought were useless. Maybe one day, IE6 was truly successful, and we were no longer tested. We mistakenly thought that the useless tag syntax would set off a CSS efficiency revolution. Haha, it's purely personal fantasy. Do not be as real as a pearl.

Contains the selector (e f)

Syntax:

E f {sRules}

Note:

Select all F elements contained by the Eelement.

Example:

Output result image:

Output result Description: ul li indicates that all li resources under ul will work, as long as they belong to ul.

Sub-selector (E> F)

Syntax:

E> F {sRules}

Note:

Select all the sub-elements F as the Eelement.

Example:

Output result image:

Description of the output result:. test> li> a indicates that it takes effect for the tag under the li tag under the selector test. Only those that belong to this relationship will work. You can see from the above example that some li elements still have the ul li selector, but it does not. It can be seen that the sub-Selector provides more refined control than the include selector. Based on the above two examples, we can also conclude that the depth and breadth of the selector are greater than that of the subobject. the pertinence and uniqueness of the subobject selector are stronger than that of the included selector. This is the difference between a selector and a sub-selector, which is confusing.

Adjacent selector (E + F)

Syntax:

E + F {sRules}

Note:

Select the F element next to the Eelement.

Example:

Output result image:

Output result Description: p + p indicates that the second p element is used only when the p element is closely connected to another p element. That is to say, only two p elements in the structure play a role, but if they are in the structure, they do not play a role on any tag, because the p tag does not form more than two (including two).

Sibling selector (E ~ F)

Syntax:

E ~ F {sRules}

Note:

Select all the sibling elements F after the Eelement.

Output result image:

Output result Description: p ~ P indicates that after the first p element appears, the next p element will play a role (that is, in a structure, the second p element appears ). If the separator is set to p ~ P ~ P. Similarly, it will sign in on the third (including the third) p element.

Note: We recommend that you randomly change the style selection character in the preceding example and test the output result. Only by doing experiments on your own can you remember more firmly.

The preceding example shows that you have learned how to use various link selector characters. So how do we use these delimiters in our daily work? It depends on your talents. Maybe I will write some effects produced by using these selector in the future, so I will discuss it with you. Reasonable and effective use can not only improve the quality of our code, but also greatly improve our efficiency.

Note:For more information about website construction skills, go to the website creation tutorial channel.