HTML Learning 5

1. Sub- Selector
There is also 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 line border.

Task
I also try to add a red border to the words "I'm still a little girl with a mouse". As follows:

1. Enter the code on the 8th line of the right-hand code Editor:

. first>span{border:1px solid Red;}

2. 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.

Task
Let me give it a try: Modify the Code

1. Modify the 9th line of code in the Code Editor on the right:

Modify the. Food>li to. Food Li to see the effect.

Think about why this is the effect?

3. 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;}
Task
I'll try, too. Set the title "Courage" in the Code Editor on the right and the font size of the two-paragraph text to 20px

4. Pseudo- class selectors
What's even more interesting is the pseudo-class selector, which is called a pseudo-class selector, which allows you to set a style for a tag that does not exist in the HTML (a state of the label), such as when 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 of the hover is used on a-label: (There are many pseudo-class selectors, especially in CSS3, but because they are not compatible with all the filters, this tutorial is just about 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.

Task
I will also try, for the right code Editor, the first paragraph of the text "timid" added the mouse over the text font size set to 20px.

5. Grouping selectors
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 the span label to set the font color to red:

h1,span{color:red;}
It is equivalent to the following two lines of code:

h1{color:red;}
span{color:red;}
Task
I'll try, too.

1, the right code Editor in the first paragraph of all the text color set to green at the same time, the second paragraph of the text of the "simple" text color set to Green

1. On the 7th line of the editor on the right, delete h1,span{color:red;} This line of previous code.

2. In line 7th of the editor on the right, enter the following code:

. First, #second Span{color:green;}

HTML Learning 5