Web Development Learning Experience 3--css syntax and cascade

This main discussionCSSRelated to the syntax and the concept of stackCSSThe layout is discussed in the next article.

For example, the first two articlesArticleDescribed,CSSIt is specially used to display documents. In this case,CSSYou can control the display of each element, so you have the element selector, the first type of syntax.

Element SelectorSyntax:

Element

{

Style rules

}

This is easy to understand. The so-called element selector means that all the elements in the document are displayed in this style rule.

Very good. With the element selector, you can control the presentation of the document to a great extent. However, people quickly encountered a new problem: I have two identical elements, but I want them to be displayed in different styles. To meet this requirement, the second type of syntax-class selector is available.

Class SelectorSyntax:

. Class(Note:ClassFirst decimal point)

{

Style rules

}

This selector indicates that all elements of this class are displayed in this style rule. So what does it mean to belong to this class? How does it belong to this class? In this case, you need to add an"Class"Property, and specify the property value as the name of the class selection operator.

With this, you can specify the style of any element in the document. However, it is found that documents often contain some unique blocks, such as headers and footers. the styles of these blocks can only be applied to this unique block, although it can be implemented using a class selector (to give the block a unique class name different from other elements on the page), if there is a special syntax to implement this unique, it will undoubtedly enableCSSClearer. So there is the third type of syntax --IDCharacter.

IDSelectorSyntax:

# ID(Note:IDPrevious#Number)

{

Style rules

}

This selector indicates thatIDIs displayed in this style rule.IDYou need to add an"ID"Attribute, and give a unique name as the attribute value. That is, two or more elements in the same document cannot have the sameIDValue.

Above3Type Selection character, which constitutesCSSThe most basic syntax. Based on this3And some other rules are derived. Some common simple descriptions are as follows:

"Selector"1Selector2"(Note the space separator): indicates the selector.1All descendant Selection Characters Under2. For example,P. Red"Indicates the element selector.PChild class nameRed.

"Selector"1>Selector2"(Note: greater than the separator: indicates the selector.1All son delimiters under2(Note only the son ). For example,P>. Red"Indicates the element selector.PThe class name in the sonRed.

"Selector"1Class Selector2"(Note that the separator is close to each other): indicates the separator.1All class delimiters in2. For example,P. Red"Indicates<P>Element belongsRed.

"Selector"1idSelector2"(Note that the separator is close to each other): indicates the separator.1MediumIDIs the selector2. For example,P # Red"Indicates<P>ElementIDIsRed.

In addition, if the style rules of the two delimiters are the same, they can be abbreviated as "delimiters ".1, Selector2"(Note the comma separator), such as"P,. Red"Indicates the element selector.PAnd class selector. RedHave the same style.

 

UnderstandCSSThen let's talk about the concept of cascade.

The so-called cascade means that the child element inherits the style attributes of the ancestor element. Most of the attributes can be inherited, but some attributes cannot be inherited, suchPadding,Margin,Float. This is not much to mention. Here we will mainly talk about how to determine the attribute value to be applied when a style attribute of an element is selected by multiple delimiters.

《Head first HTML and CSS XHTMLThe following method is used to calculate a number based on the selector. The largest digit is the final style to be applied. If there are multiple identical maximum values, take the last one of the positions.

So how can we calculate the number based on the selection operator? The method is as follows:

If the selector containsElement Selector, Then give the numberAdd1There are several element delimiters, just add a few1;

If the selector containsClass Selector, Then give the numberAdd10, There are several Class delimiters, just add a few10;

If the selector containsIDSelector, Then give the numberAdd100, There are severalIDSelect a few characters.100.

Here are a few examples:

P	. Red	# Header	P. Red	P # Header	P img	Ul li p	# Go p. Red
001	010	100	011	101	002	003	111

Note: The delimiters separated by commas cannot be regarded as a whole, but must be separated and calculated separately. For exampleP,. Red, It is equivalent toP(001) And. Red(010), Rather than the whole011.

In addition,10Element selector is not the top class selector,10Class selection characters are not the sameIDIn fact, any element selector does not have a class selector, and multiple class delimiters of the task do not have a class selector.IDCharacter. The above rules can be described in the following common mode: first, compareIDThe number of delimiters, the number of class delimiters, and the number of element delimiters.3If they are all equal, then the latter is the one defined by the backend.