Take you through CSS selectors

 

What is a selector?

 

Each declaration style css (defined) consists of two parts, the following form:

{Selector 
    style; 
}

In the previous section {} is the "Selector", "selector" indicates the "style" in the role object {}, i.e. the "style" which elements acting in web pages. Such as the right code editor in Line 7 of the " body" is a selector.

 

Tag selector

 

The tag selector is actually html code label. The right side of the code editor <html>, <body>, <h1>, <p>, <img>. For example the following codes:

p{font-size:12px;line-height:1.6em;}

The above action code css style: font size set 12px p tag, the line spacing pattern 1.6em.

Class selector

Class selectors in css coding style is most commonly used, such as the right of the code in the code editor: can be implemented as "timid", "courage" font to red.

grammar:

. Triage style code name {css;}

note:

1, the English begin with a dot

2, where the triage name can be arbitrarily named (but not from the Chinese oh)

Instructions:

The first step: Use appropriate labels to mark up content to be modified, as follows:

<Span> timid </ span>

Step 2: Use class = "class selector name" is set as a class label, as follows:

<span class = "Stress" > timid </ span>

Step 3: Set css style class classifier, as follows:

.stress {color: red;} / * in front of a class to join English dot * /

ID selector

In many ways, ID selectors are similar to class selectors, but there are some important differences:

1, set id = "ID name" as the label, rather than class = "class name."

2, the front ID selectors pound sign (#) numbers, instead of the English dot (.) .

Right code editor ID is a character selected in the complete example.

 

Class distinction and the ID selector

 

Learning class selectors and ID selectors, we will find a lot of similarities between them, are not both be universal it? We do not worry first to sum up their similarities and differences:

 

The same point: may be applied to any element
different from:

 

1, ID selector can only be used once in a document . With a different class selector, in an HTML document, ID selector can be used once and only once. Class selector may be used multiple times.

 

The following code is correct:

 

<p> third grade, I was a <span class = "Stress" > timid as a mouse </ span> little girl in class never dared to answer questions posed by the teacher, for fear the wrong answer teacher will criticize me. It has not been this <span class = "Stress" > Courage </ span> to answer the questions posed by the teacher. </ p>

 

The following code is wrong:

 

<p> third grade, I was a <span the above mentioned id = "Stress" > timid as a mouse </ span> little girl in class never dared to answer questions posed by the teacher, for fear the wrong answer teacher will criticize me. It has not been this <span the above mentioned id = "Stress" > Courage </ span> to answer the questions posed by the teacher. </ p>

 

2, may be used word-list class selector element method a plurality of patterns simultaneously. We can not both be set to a multiple style elements, but can only use the method that implement the selector, ID selector is not possible ( can not use the ID word list).

 

The following code is correct (the complete code, see the right side of the code editor)

 

{.stress 
    Color: Red; 
} 
.bigsize { 
    font-size: 25px; 
} 
<P> to <span class = "Stress bigsize" > third grade </ span> next term, we have disclosed a class of the class. .. </ p>

 

Effect of the above code is "third grade" three character sets the text color is red and the font size 25px.

 

The following code is incorrect (complete code, see the right side of the code editor)

 

{#stressid 
    Color: Red; 
} 
#bigsizeid { 
    font-size: 25px; 
} 
<P> to <span ID = "stressid bigsizeid" > third grade </ span> next term, we have disclosed a class of the class. .. </ p>

 

The above code can not be implemented as a "third grade" three text character set and font color to red to act by 25px.

 

Child selector

Another useful selector child selector , i.e., greater than symbol (>) for selecting a tag element specify a first-generation child element. The right code editor code:

.food>li{border:1px solid red;}

This line of code makes class sub-elements li (fruits, vegetables) under the added red food called solid border.

It contains (descendant) selectors

It includes a selector , i.e. addition of spaces, for selecting the specified tag element descendant element. The right code editor code:

.first  span{color:red;}

This line of code makes the first paragraph of text in the "timid" font color to red.

Please note that this distinction selectors and child selectors, sub-selectors (child selector) only refers to its direct descendant , or you can be understood as acts on the first generation progeny of child elements. The descendant selector is applied to the descendants of all sub-elements . Descendant selectors through space to choose, and the child selector is through the " > to choose."

Summary: > act on the elements of the first generation of offspring, a space acts on the elements of all future generations.

 

Universal selector

 

Universal selector is the most powerful of the selector, which uses a number (*) is specified, its role is to match the html all label elements, the following use the following code uses any html tag is set to all elements in red font color:

* {color:red;}

Pseudo Class Selector

Even more interesting is pseudo-class selectors, why it is called pseudo-class selectors, which allows to label (label of a particular state) html there is no set style, for example, we give an html tag element of a rollover state set font color:

a:hover{color:red;}

The previous line is provided to a red font color label a rollover state. This will make the first paragraph of text in the "timid" text added to mouse over the font color to red effects.

The pseudo selectors:

    About pseudo-class selectors, so far, is compatible with all browsers "pseudo-class selectors," is to use on a label: hover (in fact, there are many pseudo-class selectors, in particular, css3, but because they can not be compatible with all browser, the tutorial just say this one of the most commonly used). In fact,: hover can be placed on any label, for example, p: hover, but their compatibility is very good, so now is a more commonly used: the combination hover.

 

Packet selector

When would you like element is provided with a plurality of tab style html may be used packet selector (,), the following code is the right code editor h1, span tags simultaneously 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;}

 

 

 

Guess you like

Origin www.cnblogs.com/SoftwareEngineerYang/p/11528730.html