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

This article mainly introduces the commonly used css3 basic selector is what, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Commonly used css3 basic selector: 1, wildcard selector "*"; 2, class selector ".class name"; 3, element selector; 4, ID selector "# id name"; 5, group selector "Esquire F...", elements of the same style can be grouped together, and each selector is separated by a comma.

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

1. Wildcard selector (supported by all browsers)

The universal selector is represented by * to select all elements, or you can select all elements under an element

* {marigin: 0; padding: 0; font-size: 14px;}

You must have seen a lot of the above code in the reset style file. What he means is that the margin and padding of all elements are set to 0, the font size is set to 14px, and the other is to select all elements under an element:

Wildcard selector .demo * {width: 50px; height: 50px; border: 1px solid blue; margin: 10px } 1

two

three

Effect picture:

We can see that the three child elements in the demo element, div,p,span, are not styled separately, but as long as we set the uniform style for all elements under the demo element, then the three child elements in the demo element, div,p,span, will appear.

two。 Class selector (all browsers support class selector, but multi-class selector (.className1.className2) is not supported by ie6. )

The class selector is selected according to the class name, preceded by "." To specify the style in a way independent of the document element, you need to define the class name on the html element before using the class selector, in other words, you need to ensure that the class name exists in the html tag.

Class selector .demo {width: 200px; height: 200px; margin: 50px auto; background: # 2DC4CB } Class selector

Effect picture:

3. Element selector (supported by all browsers)

Element selector (tag selector) is the most common and basic selector in css3 selector. The element selector is actually the element of the document, such as html,body,p,p, etc. In the following example, the span element is selected and the font color is set to red.

Element selector .demo {width: 200px; height: 200px; margin: 50px auto } span {color: red;}

The style is changed here using the element selector

Effect picture:

4.ID selector (supported by all browsers)

The ID selector is very similar to the class selector mentioned above. Before using the ID selector, you also need to add the ID name in the html document, so that the corresponding element can be found in the style selector. The difference is that the ID selector is the only value in a page. When we use the class, we add a "." While the id selector uses "#" such as (# demo) before the name.

ID selector # demo {width: 200px; height: 200px; margin: 50px auto; background: # FF0000 } ID selector

Effect picture:

There are several things to pay special attention to in the ID selector:

First: an id selector can only be used once in a document, because id is unique on the page.

Second, id selectors cannot be combined like class selectors, and an element can only be named with one id name.

Third, you can use the same id name in different documents, such as "# important" for H2 in "test.html", or "# important" for id of p in "test1.html", but only if there is only one id called "# important" in test.html or test1.html.

5. Group selector (supported by all browsers)

When several elements have the same style attributes, you can call a declaration together, with elements separated by commas. The group selector is to group elements of the same style together, and each selector is separated by a comma. This comma tells the browser that the rule contains several different selectors. If there is no comma, then the meaning expressed is completely different. Omitting the comma will become the descendant selector we mentioned earlier, which we should be careful in using.

Group selector .demo {width: 200px; height: 200px; margin: 50px auto; background: # FF0000 } p, li {color: blue;} .demo1, .demo2 {color: # fff }

Here is a paragraph!

List link one

Words!

Effect picture:

Thank you for reading this article carefully. I hope the article "what is the basic selector of commonly used css3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.