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

This article mainly introduces "what are the basic selectors of css". In daily operation, I believe many people have doubts about the basic selectors of css. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the basic selectors of css?" Next, please follow the editor to study!

The basic selectors of css are: 1, wildcard selector; 2, tag selector; 3, class selector; 4, Id selector; 5, combined element selector; 6, multi-class selector.

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

Introduction to basic selector

The basic selector is divided into six ways: for example, wildcard selector, tag selector, class selector, Id selector, combined element selector, multi-class selector.

Basic selector usage description table.

Selector syntax format meaning example wildcard selector * {attribute: value;} Universal selector can select all elements on the page and apply styles to them, represented by *. It is not recommended and IE6 does not support it, which adds burden to large websites. * {width: 300px;} tag selector tag signature {attribute: value;} tag selector to match the tag of the corresponding HTML. H2 {color: red;} class selector .class attribute value {attribute: value;} class selector, which styles elements that have the specified class attribute value. .box {color: red;} Id selector # id attribute value {attribute: value;} Id selector, the Id selector is used once and only once in an HTML document. The Id selector is defined by #. # box {color: red;} combines the element selector tag signature .class attribute value {attribute: value} selector according to the element that contains the specified .class attribute value in the tag signature. P.box {color:red;} multiclass selector .class attribute value .class attribute value {attribute: value;} by linking two class selectors together, only elements that contain these class names can be selected (in any order). Note: in previous versions of IE7, Internet Explorer on different platforms did not handle multi-class selectors correctly. .box.box1 {color:red;} wildcard selector

Next, let's go to the general selector practice. The author sets the font color in the H2 tag and p tag in the HTML page to red in embedded form.

Code block

Wildcard selector * {color: red;}

Result diagram

Tag selector

Next, let's go to the tag selector practice. The author sets the font color in the H2 tag and p tag in the HTML page to red in embedded form.

Code block

Tag selector H2 {color: red;}

Result diagram

Note: the tag selector refers to styling the specified label.

Code block

Tag selector H2 {color: red;} success is not about defeating others, but about changing yourself.

Result diagram

Now you should know why the p tag has not changed, because the role of the tag selector is to style the specified tag, and then the author sets the font color of the p tag to red.

Code block

Tag selector H2 {color: red;} p {color: red Success is not about defeating others, but about changing yourself.

Result diagram

Class selector

Next, let's go to the class selector practice. The author uses the class attribute value of .box in embedded form to set the H2 tag in the HTML page and the font color in the p tag to red.

First, we set the first H2 tag font color in the HTML page to red.

Code block

Class selector .box {color: red;} success is not about defeating others, but about changing yourself.

Result diagram

Note: as long as the class property is a tag with a value of .box, no matter what label it is, the font color will be set to red, and the rest of the CSS style will be the same.

Now let's set the second H2 tag and p tag font color to red.

Code block

Class selector .box {color:red;} success is not about defeating others, but about changing yourself.

Result diagram

Id selector

Next, let's go to the id selector practice. In an embedded form, the author sets the font color in the H2 tag in the HTML page to red through the id attribute value of # box.

Code block

Id selector # box {color: red;} success is not about defeating others, but about changing yourself.

Result diagram

Note: using the id selector sets the style for having the specified id property value, but note that the id property value must be unique in a HTML page.

Binding element selector

Next, let's go into the practice of combining the element selector. In an embedded form, the author sets the font color of the .box element to red through the h3 tag class attribute value.

Code block

Success with the element selector h3.box {color: red;} is not about defeating others, but about changing yourself. Success is not defeating others, but changing yourself.

Result diagram

Note: the implementation principle of the element picker is explained as follows: first, find the h3 tag, then go to the h3 tag to find the class attribute value of .box, and if you find the class attribute value of .box, set the style for it. Now you should know why the value of the class attribute under the span tag is .box.

Multi-class selector

Next, let's move on to the multi-class selector practice. The author sets the font color of the class property value to red, which contains .box and .box1 elements in embedded form.

Code block

Multi-class selector .box.box1 {color: red;} success is not about defeating others, it's about changing yourself. Success is not defeating others, but changing yourself.

Note: the implementation principle of the multi-class selector is explained as follows: first, the class attribute value can be set to multiple spaces separated by spaces, for example: if a class attribute value contains .box and .box1 to style it, by linking the two class selectors together, you can only select elements that contain these class names at the same time (no restriction on the order of class names). If a multi-class selector contains a class name that is not in the list of class names, the match will fail. By now you should know that the individual class attribute values of .box and .box1 have not been rendered.

At this point, the study of "what are the basic selectors of css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.