Learning html (8) CSS selector from scratch -- On,

Learning html (8) CSS selector from scratch -- On,
1. What is a selector?

1 <! Doctype html> 2 What is a selector?
Each css style Declaration (Definition) consists of the following two parts:
Selector {style ;}
The part before {} is the "selector". The "selector" specifies the "Style" objects in {}, that is, the elements that "Style" acts on the webpage.
For example, in the Code Editor, the "body" in the 7th line of code is the selector.
Ii. Tag Selector
1 <! Doctype html> 2 Tag Selector
The tag selector is actually a tag in html code. Such as 
p{font-size:12px;line-height:1.6em;}
The preceding css style code sets a 12px font size for the p tag and a 1.6em style for the row spacing.
To add a style for the title "courage", remove the default Bold Style of the h1 label, and set the font color to red.
1. In line 2 of the editor, enterh1{
2. In line 2 of the editor, enterfont-weight:normal;
3. In line 2 of the editor, entercolor:red;
4. In line 2 of the editor, enter}
 
Font-weight: normal;/* remove the bold style */
 
Iii. class selector
1 <! Doctype html> 2 Class Selector
Class selectors are the most commonly used in css style encoding. For example, the code in the code editor can be used to set the font "timid" and "courageous" to red.
Syntax:
. Class selector name {css style code ;}
Note:
1. Start with an English dot
2. The class selector name can be any name, but cannot start with a number (but not Chinese)
Usage:
Step 1: Use a proper tag to mark the content to be modified as follows:
<Span> timid </span>
Step 2: Use class = "class selector name" to set a class for the label, as shown below:
<Span class = "stress"> timid </span>
Step 3: Set the css style of the class selector as follows:
. Stress {color: red;}/* add an English dot before the class */
In the second paragraph, set the "Open Class" text to green.
1. In row 16th of the editor, enter:
<Span class = "setGreen"> public course </span>
2. In line 10-12 of the editor, enter:
.setGreen{   color:green;}
The tag selector targets html-embedded tags (p, h1). The class selector can be customized (use span class = "" to set a class)
Iv. ID Selector
1 <! Doctype html> 2 ID Selector
In many ways, the ID selector is similar to the class selector, but there are also some important differences:
1. Set id = "ID name" for the tag, instead of class = "class name ".
2. The ID is preceded by the pound sign (#) instead of the dot (.).
The code editor is a complete instance of the ID selector.
To use the ID selector to set the "Open Class" text in the second paragraph to green.
1. In row 16th of the editor, enter:
<Span id = "setGreen"> public course </span>
2. In line 10-12 of the editor, enter:
#setGreen{   color:green;}

V. Differences between class and ID Selector
1 <! Doctype html> 2 Class and ID Selector
After learning the class selector and ID selector, we will find that there are many similarities between them. Can they be common?
Let's take a look at their similarities and differences:
Similarities: can be applied to any element
Differences:
1. The ID selector can only be used once in the document. Unlike the class selector, in an HTML document, the ID selector can only be used once and only once. The class selector can be used multiple times.
The following code is correct:
<P> in the third grade, I was a <span class = "stress"> timid girl </span> who never dared to answer questions from the teacher in class, for fear that the answer is wrong. The teacher will criticize me. I have never had the <span class = "stress"> courage </span> to answer questions raised by the teacher. </P>
The following code is incorrect:
<P> in the third grade, I was a <span id = "stress"> timid girl </span> who never dared to answer questions from the teacher in class, for fear that the answer is wrong. The teacher will criticize me. I have never had the <span id = "stress"> courage </span> to answer questions raised by the teacher. </P>
2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for an element at the same time, but it can only be implemented using the class selector method. The ID selector is not allowed (the ID word list cannot be used ).
The following code is correct (for the complete code, see the code editor)
. Stress {color: red ;}. bigsize {font-size: 25px;} <p> when we arrived at <span class = "stress bigsize"> grade 3 </span> next semester, we held an open class... </p>
The above Code sets the text color to red and the font size to 25px for the "third-grade" text.
The following code is incorrect (for the complete code, see the code editor on the right)
# Stressid {color: red ;}# bigsizeid {font-size: 25px ;}< p> to <span id = "stressid bigsizeid"> grade 3 </span> next semester, we have an open class in our class... </p>
The above Code cannot be used to set the text color to red and the font size to 25px for the "third-grade" text.
 
Id is like an id card number. It is unique and the id card number represents you. A person cannot have two ID card numbers or one ID card number to indicate two people.



The class is like a nickname, which can also represent you. One person can have multiple nicknames, or multiple people can use the same nickname. So when should I use id and class?

According to W3C standards, IDs with the same name are not allowed to appear on the same page, but classes with the same name are allowed. In this way, websites are generally divided into headers, bodies, and feet, because they only appear once on the same page, so id, other, for example, if you define a class with red color, you may need to use it multiple times on the same page. In addition, id is used when js is used on the page or when an object is to be dynamically called, so it should be used according to your own situation. Class.

Id used #

The class name can be repeated.

The id does not work on mature websites. you rarely see that the id selector in css is used by class, And the id selector is left for js users to avoid conflicts. Id is used for a specific style (uniqueness) and can only be used once. Class is used for a group of identical styles (similarity) and can be used multiple times. The number of times should not be used. It should be said that id can only specify unique elements, while class can specify multiple elements and divide these elements into one class.