You can remember six important selectors in CSS in three seconds!

What are the CSS selectors? ? ?

1. Wildcard (*)

It can also be called a global selector or a universal selector. As the name implies, it defines the style of all elements. Commonly used in some default styles, such as setting the inner margin to 2px *{padding: 2px;} for all elements to increase the beauty of the page!

2. Tag selector

It can also be called an element selector, such as div, p, img, etc.

3. Class selector

The class name cannot start with a number, it must start with a dot. The class name of a page can be repeated. For example, the form of the class name {}.

4. ID selector

Starting with #, the same id name cannot appear on a page.

5. Side by side selector

Several selectors need to be set to the same style, separated by commas. For example, div,p{ color:red;}, set the font color of both div tag and p tag to red.

6. Parent-child selector

As far as the element is the relationship between father and son, it is the son that changes. The selectors are separated by spaces, such as div h1{ font-size:60px;}, set the font size of the h1 tag in the div tag ne to 60 pixels. This must be h1 in the div to change the style.

 

priority:

ID selector> class selector> tag selector> wildcard

There is no need to explain the priority. Whoever loads and runs first is the big brother┗|`O′|┛


There are a lot of selectors that will not be introduced one by one, such as pseudo-type selectors and pseudo ID selectors. The key is that you can’t remember, just remember the above, which is more common. Let me give you some examples for easy understanding.

Naming rules for class names and ID names:

1. Don't start with a number.

2. The class name and ID name should be well understood. Chinese cannot be used. Pinyin can be used if English is not good. If the pinyin is not good, you should stop using it, hahaha. [Not a mockery~]

If you are rather naïve or lazy, do one, two, three, and you will see it after a while, you will collapse, you can’t remember what 1, 2, or 3 wrote o(≧口≦)o

Do not redistribute without permission! It is not easy for a fairy to type code, welcome to give a reward! (´▽`ʃ♡ƪ)

Guess you like

Origin blog.csdn.net/qq_44761243/article/details/108227213