Learning html (8) CSS selector from scratch -- bottom, css Selector

Learning html (8) CSS selector from scratch -- bottom, css Selector

6. Sub-Selector

1 <! Doctype html> 2 Child Selector
There is also a useful selector sub-selector, that is, greater than the symbol (>), used to select the first child element of the specified tag element.
For example, the code in the Code Editor:
.food>li{border:1px solid red;}
This line of code adds the child element li (fruit and vegetables) under the class name "food" to the red solid border.
Let's try. Add the phrase "I am a girl who is so timid" to the red border. As follows:

Enter the code in line 2 of the Code Editor:
. First> span {border: 1px solid red ;}
Because this is the abbreviation of border style, they are a whole, So add a semicolon after the whole (that is, after red ..
Border: 1px solid red;
Equivalent
Border-width: 1px; // border width
Border-style: solid; // border style
Border-color: red; // border color

> This "select the first child element of the specified Tag Element" means that the style will only act on its child and will not act on its grandson.

In this example, the span outside the "<p class =" first "> <span> I am a girl <span> timid </span> </p> "is the child of "p class =" first,

"<Span> timid </span>" is a span package, but it is the grandson of "p class =" first,

It is wrapped in the first span (that is, its child), so the style does not work for it.

If you change ">" to a space, you will find that both spans have borders. Spaces are used for all descendants of an element.


Spaces are applicable to all corresponding elements, while> is applicable to the next generation and can be used continuously, that is,. first> span

I feel that if we compare programming to a war, and different languages represent different types of soldiers, then a group of soldiers with their own personalities will appear,

The html, css, and js we learned are three different weapons. Their tag language represents a group of soldiers with different personalities,

Now, as commanders, what we need to learn is to make them cooperate with each other. Then, soldiers of different types of soldiers need us to communicate with them in different ways,

As time advances, these communication methods have evolved into different routines. What we need to learn now is to use these routines to help us win the war!

If we compare it to the commander-in-chief, the selector is the method for issuing commands. As the Commander-in-Chief, we certainly want to publish commands to every soldier (TAG,

So that they can execute tasks according to our commands, so there will be so many selectors that the command of the commander can be released in different scopes through the selector. The range of commands to be released depends on the selector you use.
7. Include (descendant) Selector
1 <! Doctype html> 2 Contains (descendant) Selector
Contains the selector, that is, adding spaces to select the generation element under the specified tag element. For example, the code in the Code Editor:
.first  span{color:red;}
This line of code changes the font color of the first text to red.
Note the difference between this selector and the child selector. child selector only refers to its direct descendant,
Or you can understand it as acting on the first generation of child elements. The descendant selector acts on all child elements.
The child selector selects the child selector by space, and the Child selector selects the child selector by ">.
Conclusion:> it acts on the first generation of the element, and spaces act on all the descendants of the element.
Try it: modify the code
In the code editor9Modify the line of code:
Set.food>liChange.food liCheck the effect.
To sum up, the difference between the class selector and the ID selector is that the class selector is used for countless times, and the id selector is used only once,
A child selector is the first descendant, and a child selector contains all descendants,
Contains the selector with spaces, while the child selector with>.
8. General Selector
1 <! Doctype html> 2 General Selector
A general selector is the most powerful selector. It is specified by a (*) Number and matches all tag elements in html,
Use the following code to set the font color of any Tag Element in html to Red:
* {color:red;}
In the Code Editor, set the title "courage" and the font size of the two paragraphs to 20px.
1. Delete the * {color: red;} code in line 2 of the editor.
2. In line 2 of the editor, enter * {font-size: 20px ;}
 
9. Pseudo-class selector
1 <! Doctype html> 2 Pseudo-class selector
What's more interesting is the pseudo-class selector. Why is it called the pseudo-class selector? It allows you to set styles for tags that do not exist in html (some state of tags,
For example, we can set the font color for the mouse sliding status of a Tag Element in html:
a:hover{color:red;}
The above line of code sets the font color to red for the sliding status of tag.
This will make the first paragraph of the text content of the "timid" text to add the mouse over the font color to the red effect.
Pseudo-selector:
So far, the "pseudo-class selector" that can be compatible with all the token authenticator is used on tag a: hover.
(In fact, there are many pseudo-class selection characters, especially in css3, but this tutorial only describes this one of the most commonly used ones because it is not compatible with all browsers ).
In fact, hover can be placed on any label, such as p: hover, but their compatibility is also very poor, so it is usually a combination of a: hover.
 
In the Code Editor, add the mouse-sliding text font size to the first text in the Code Editor and set it to 20px.
Do you enter the following code:
A: hover
{Color: red;
Font-size: 20px;
}
Tag selector, tag name {}, acting on all tags.

Class selector,. class {}, defines class = "" in the label, which belongs to the graphic structure.

ID selector, # ID {}, defines id = "" In the tag and has a strict one-to-one correspondence relationship.

The sub-selector,. span> li {}, acts on the li Tag next to the span class of the parent element.

Contains the selector. span li {}. It acts on all li tags under the parent element span.

The common selector * {} matches all html Tag elements.
Pseudo-class selector: it allows you to set a style for a tag that does not exist in html (a certain state of the tag). For example, you can set the font color by sliding the mouse of A Tag Element in html.


A: link {color: # FF0000}/* unaccessed link */
A: visited {color: #00FF00}/* accessed link */
A: hover {color: # FF00FF}/* move the cursor over the link */
A: active {color: # 0000FF}/* selected link */
First-child only supports IE
10. Group Selector
1 <! Doctype html> 2 Group Selector
When you want to set the same style for multiple tag elements in html, you can use the group selector (,), the following code sets the font color to red for both the h1 and span labels in the code editor on the right:
h1,span{color:red;}
It is equivalent to the following two lines of code:
h1{color:red;}span{color:red;}
To try
1. Set the color of all text in the first paragraph of the code editor to green, and set the "simple" text color in the second paragraph to green.
 
 
1. Delete row 7th in the editor.h1,span{color:red;}This line of previous code.
2. Enter the following code in row 7th of the Editor:
. First, # second span {color: green ;}


. First is a selector that sets the entire first tired to green.
# Second span is the second selector. It sets all descendant span elements under the element whose ID is second to green.
Use the group selector (,) to compress two selectors into a group.

Id selector, class selector, and include selector are used.