HTML learning the next day--eighth chapter--CSS Selector

The tag selector is actually a tag in the HTML code. such as P{font-size:12px;line-height:1.6em;}
The effect of the above CSS style code: Set the 12px font size for the P tag, and the line spacing to set the 1.6em style.

Class Selector
Class selectors are most commonly used in CSS style encodings, such as the code in the right-hand code Editor: can be implemented as "timid", "courage" font is set to red.
Grammar:
. class Selector name {CSS style code;}
Attention:
1, English dot start
2, where the class selector name can be arbitrarily named (but not Chinese OH)
How to use:

• The first step: Use the appropriate tags to mark the content to be modified, as follows:<span> timid </span>
• Step Two: Use class= class selector name to set a class for the label, as follows:<span class= "stress" > Timid </span>
• Step three: Set the class selector CSS style as follows: . stress{color:red;} /* Add an English dot in front of the class */

<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> recognize HTML tags </title><style type="Text/css">. stress{color:red;}. Setgreen{color:green;}</style>class="Stress"> Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. I've never had this <span.class="Stress"> Courage </span> to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p><p> in the third grade next semester, our class has a section of <spanclass="Setgreen"> Open Class </span> the teacher put forward a very simple question, the class many students have raised their hands, even the result is much worse than I, also raised his hand, also said:"I'm coming, I'm coming. "I looked around for four weeks, so I didn't raise my hand. </p>"http://img.mukewang.com/52b4113500018cf102000200.jpg"></body>

ID Selector
In many ways, the ID selector is similar to a class selector, but there are some important differences:
1. Set id= "ID name " for the label, instead of class= "class name ".
2. The ID selector is preceded by the pound sign (#) , not the English dot (.).
The right-hand code editor is a complete instance of an ID selector.
<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> recognize HTML tags </title><style type="Text/css">#stress {color:red;} #setGreen {color:green;}</style>"Stress"> Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p><p> in the third grade next semester, our class has a section <span id="Setgreen"> Open Class </span> the teacher put forward a very simple question, the class many students have raised their hands, even the result is much worse than I, also raised his hand, also said:"I'm coming, I'm coming. "I looked around for four weeks, so I didn't raise my hand. </p></body>
Differences between class and ID selectors
Learning the class selector and ID selector, we will find that there are a lot of similarities between them, is not the two can be common? Let's not be anxious to summarize their similarities and differences in the first few years:
Same point: can be applied to any element
Different points:
1. The ID selector can only be used once in the document. Unlike class selectors, anID selector can only be used once, and only once, in an HTML document. The class selector can be used more than once. 
The following code is correct:
<p> third grade, I was a <span class= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. There has been no such <span class= "stress" > Courage </span> to answer questions raised by the teacher. </p> while the following code is wrong:<p> third grade, I was a <span id= "stress" > Timid </span> little girl, class never dared to answer the teacher asked questions, The teacher will criticize me for fear of the wrong answer. There has been no such <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 one element at the same time, but only with the method of the class selector, the ID selector is not possible (the list of ID words cannot be used).
The following code is correct (see the Code Editor on the right for the full code)
. stress{
color:red;
}
. bigsize{
font-size:25px;
}
<p> <span class= "Stress bigsize" > third grade </span> next semester, our class has a public class ...</p>
The function of the above code is to set the text color to red for the "third grade" three text and the font size to 25px.
The following code is incorrect (see the Code Editor on the right for the full code)
#stressid {
color:red;
}
#bigsizeid {
font-size:25px;
}
<p> <span id= "Stressid Bigsizeid" > Third grade </span> next semester, our class has a public class ...</p>
The above code can not be implemented for the "third grade" three text set the text color is red and the font size for the effect of 25px.
<! DOCTYPE html>
　　
The 
 
 Sub-selector 
 also has a more useful selector sub-selector, the greater than symbol (>), for selecting the first generation of child elements of the specified label element. Code in the right-hand code Editor: 
. food>li{border:1px solid Red;} 
 This line of code causes the child element Li (fruit, vegetable) under the class name to add a red solid border. 
<! DOCTYPE html>
　　

Include (descendant) selectors
Contains a selector, which is a space to select the Descendants element under the specified label element. Code in the right-hand code Editor:
. First span{color:red;}
This line of code makes the "timid" font color red in the first paragraph of text content.
Notice the difference between this selector and the sub-selector, where the child selector (children selector) refers only to its immediate descendants, or you can understand the first generation of descendants acting on child elements. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >.
Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.
Universal Selector
The universal selector is the most powerful selector, which uses a (*) number designation, which is used to match all tag elements in the HTML, using the following code to use any LABEL element in the HTML font color is all set to red:
* {color:red;}
  pseudo-class selector  
 What's more interesting is the pseudo-class selector, why it's called a pseudo-class selector, and  it allows you to set a style for a tag that doesn't exist in the HTML (a state of the label), For example, we set the font color for the mouse-over state of a tag element in HTML:  
 a:hover{color:red; 
 the previous line of code is to set the font color to red for the A-label mouse-over state. This will make the first paragraph of the text content of the "timid" text added to the mouse over the font color into a red effect. 
 about pseudo-selectors: 
 about Pseudo-class selectors, so far, the "pseudo-class selector" that can be compatible with all the filters is used on the A-label: hover (In fact, there are many pseudo-class selectors, especially in CSS3, but because it is not compatible with all the filters, This tutorial is just about this one of the most common). In fact: hover can be placed on any label, such as P:hover, but their compatibility is also very bad, so now more commonly used or a:hover combination. 
 
 
 Group Selector 
 When you want to set the same style for multiple label elements in the HTML, you can use the grouping selector (,), which is the following code for the H1 in the right-hand code editor, and a span label that also sets the font color to red: 
  H1, span{color:red;}  
 It corresponds to the following two lines of code: 
  h1{color:red;}  
  span{color:red;}  
<! DOCTYPE html>
　　
HTML learning the next day--eighth chapter--CSS Selector