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

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!

<<:  How to create a web wireframe using Photoshop

>>:  Detailed explanation of the process of zabbix monitoring sqlserver

Recommend

React configuration px conversion rem method

Install related dependencies npm i lib-flexible -...

Web page printing thin line table + page printing ultimate strategy

When I was printing for a client recently, he aske...

Tutorial on installing Tomcat server under Windows

1 Download and prepare First, we need to download...

Linux automatically deletes logs and example commands from n days ago

1. Delete file command: find the corresponding di...

Detailed explanation of MYSQL database table structure optimization method

This article uses an example to illustrate the me...

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

Vue development tree structure components (component recursion)

This article example shares the specific code of ...

Analysis of different MySQL table sorting rules error

The following error is reported when MySQL joins ...

Detailed explanation of nginx optimization in high concurrency scenarios

In daily operation and maintenance work, nginx se...

Vue implements three-dimensional column chart based on echarts

The three-dimensional column chart consists of th...

MySQL efficient query left join and group by (plus index)

mysql efficient query MySQL sacrifices group by t...

Solution to the garbled code problem in MySQL 5.x

MySQL is a commonly used open source database sof...