Six important selectors in CSS (remember them in three seconds)

From: https://blog.csdn.net/qq_44761243/article/details/108227213

What are the CSS selectors? ? ?

1. Wildcard character (*)

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

2. Tag selector

Also called an element selector, such as div, p, img, etc.

3. Class Selector

A class name cannot start with a number and must start with a . A page's class name can be repeated. For example, the format of class name { }.

4. ID Selector

It starts with #. The same id name cannot appear on a page.

5. Parallel selector

That is, several selectors need to set the same style, separated by commas. For example, div,p{ color:red;} sets the font color of the div tag and the p tag to red.

6. Parent-child selector

In terms of the relationship between the elements, it is the son who changes. Selectors are separated by spaces, for example, div h1{ font-size:60px;} sets the font size of the h1 tag inside the div tag to 60 pixels. Here, the h1 must be inside 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 boss┗|｀O′|┛

There are many other selectors that I will not introduce one by one, such as pseudo-class selectors and pseudo-ID selectors. The key is if you can't remember them, just remember the ones above, they are more commonly used. Here are some examples to make it easier to understand.

Naming rules for class names and ID names:

1. Don't start your name with a number.

2. The class name and ID name should be clear from the literal meaning. Do not use Chinese. If you are not good at English, you can use pinyin. If you are not good at pinyin, forget it, just don’t use it, hahahaha. [I’m not making fun of you~]

If you are naive or lazy, you can make one, two, three. You will be upset when you look at them again after a while because you can't remember what 1, 2, 3 are written o(≧口≦)o

Summarize

This concludes this article about the six important selectors in CSS (which you can remember in three seconds). For more relevant CSS selector content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!