CSS structure and rules

Document directory

• Rules
• Combination
• Inheritance
• Annotation
• Locating the pseudo-anchor
• Pseudo element of the first line
• First letter pseudo element

• Selection Operator of basic syntax rules

  Any HTML element can be a css1 selector.SelectorIt is just an element pointing to a special style. For example,

  P { text-indent: 3em }

  The selector isP.

  Class Selector

  A single selector can have differentClass(Class), so the same element can have different styles. For example, a Web Builder may want to display the code in different colors depending on the language:

  code.html { color: #191970 }code.css  { color: #4b0082 }

  The preceding example creates two classes,CSSAndHtmlFor HTMLCodeElement.ClassAn attribute is a class used to specify elements in HTML. For example,

  <P class = "warning"> only one class is allowed for each selector. For example, code.html. Proprietary is invalid. </P>

  Class declaration can also be unnecessary with related elements:

  .note { font-size: small }

  In this exampleNoteClass can be used for any element.

  A good habit is to name classes according to theirFunctionInstead of based on theirAppearance. In the above exampleNoteClass can also be namedSmallBut if the webpage maker decides to change the style of this class so that it is no longer a small font, then the name becomes meaningless.

  Id Selector

  Id SelectorDefine the components of each element individually. This option should be used as few as possible, because it has certain limitations. The specified ID must have an indicator "#" before the name. For example, the ID selector can specify the following:

  #svp94O { text-indent: 3em }

  For more information, seeIDAttribute:

  <P id = svp94o> text indent 3em </P>

  Association Selector

  Association SelectorIt is a string consisting of two or more single delimiters separated by spaces. These delimiters can specify general attributes, and their priority is higher than that of a single delimiters due to cascade order rules. For example, the following context Selector

  P EM { background: yellow }

  YesP em. This value indicates that the highlighted text in a paragraph will be a yellow background, while the highlighted text in the title will not be affected.

  Declare attributes

  OneAttributeThe selector is specified to use its style. Examples of attributes include:Color,BoundaryAndFont.

  Value

  DeclaredValueIs an attribute accepted parameter. For example, attributeColorAcceptable ValueRed.

  Combination

  To reduce repeated declarations of style sheets,CombinationIs allowed. For example, all titles in the document can be combined to give the same statement:

  H1, H2, H3, H4, H5, H6 {  color: red;  font-family: sans-serif }

  Inheritance

  In fact, all the delimiters nested in the selector inherit the attribute value specified by the outer selector, unless otherwise changed. For exampleBodyDefinedColorThe value is also applied to the text of the paragraph.

  In some cases, the internal selector does not inherit the values of the surrounding selector, but theoretically these are all special. For example,Upper BoundaryAttributes are not inherited; intuitively, a paragraph does not have the same documentBodySame upper boundary value.

  Annotation

  The annotations in the style sheet are specified using the same conventions in C programming. Examples of css1 annotation are shown in the following format:

  /* COMMENTS CANNOT BE NESTED */

  Pseudo class and pseudo element

  Pseudo classAndPseudo elementIs a special class and element that can be automatically recognized by browsers that support CSS. Pseudo classes differentiate elements of different types (For example, Visited links (accessed connections) and active links (activable connections) describe the types of the two anchors ). A pseudo element is a part of an element, such as the first letter of a paragraph.

  The format of pseudo-class or pseudo-element rules is as follows:

  Selector: pseudo class {property: Value}

  Or

  Selector: pseudo element {attribute: Value}

  Do not apply htmlClassAttribute. Common classes can be used with pseudo classes and pseudo elements, as shown below:

  Selector. Class: pseudo class {property: Value}

  Or

  Selector. Class: pseudo element {attribute: Value}

  Locating the pseudo-anchor

  The pseudo class can be specified.AThe elements display connections, accessed connections, and active connections in different ways ). Positioning the anchor element provides a pseudo classLink,VisitedOrActive. An accessed connection can be defined as a display of different colors, or even different font sizes and styles.

  An interesting effect is to make the current (or "activable") connections display in different colors and larger fonts. Then, when the accessed connection of the webpage is reselected, it is displayed in different colors and smaller fonts. An example of this style sheet is as follows:

  A:link    { color: red }A:active  { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }

  Pseudo element of the first line

  Articles in newspapers, suchWall Street JournalThe first line of the text is displayed in bold and all uppercase. Css1 includes this function and uses it as a pseudo element.First linePseudo elements can be used for any block-level element (for exampleP,H1And so on ). The following isFirst lineExample of pseudo elements:

  P:first-line {  font-variant: small-caps;  font-weight: bold }

  First letter pseudo element

  First letterPseudo elements are used to increase (drop caps) and other effects. The first letter of the text containing the selected value is displayed according to the specified value. OneFirst letterPseudo elements can be used for any block-level element. For example:

  P:first-letter { font-size: 300%; float: left }

  It is three times larger than normal fonts.

  Cascade order

  When multiple style sheets are used, the style sheet needs to compete for control of a specific selector. In these cases, there will always be rules for style sheets to gain control. The following features determine the result of a different style sheet.

  1. ! Important

     You can use the specified! ImportantEspecially important. An important style prevails over other styles with the same weight as it is. Similarly, when both the web page producer and the reader specify important rules, the rules of the web page producer will surpass those of the reader. Below is! ImportantDeclaration example:

     BODY { background: url(bar.gif) white;       background-repeat: repeat-x ! important }

  2. Origin of rules (author's vs. Reader's)

     As previously mentioned, both web page makers and readers have the ability to specify style sheets. When the rules of the two conflict, the rules of the web page maker will prevail over other rules with the same weight of the reader. The style sheets of Web Page makers and readers go beyond the built-in style sheets of browsers.

     Web page makers should be careful when using! ImportantRules, because they will surpass any! ImportantRules. For example, a user may require a large font or a specified color due to the visual relationship, and such a user may declare a definite style rule! ImportantBecause these styles are extremely important for users to read webpages. Any! ImportantRules will go beyond general rules. Therefore, we recommend that you use general rules to ensure that users with special style requirements can read the webpage.

  3. Selection Rule: Computing Features

     Based on their feature levels, a style sheet can also go beyond the conflicting style sheet. A high-characteristic style always prevails over a style with a low feature. This is just a statistical game that calculates the specified number of selector.

     1. In the statistics SelectorIDNumber of attributes.
     2. In the statistics SelectorClassNumber of attributes.
     3. The HTML Tag Name format in the statistics selector.

     Finally, write three numbers in the correct order. Do not add spaces or commas to get a three-digit number. (Note: You need to convert the number into a larger number ending with three digits .) The final number list corresponding to the selector can easily determine that a higher number is superior to a lower number. The following is a list of feature-specific delimiters:

     # Id1 {XXX}/* A = 1 B = 0 C = 0 --> feature = 100 */ul Li. red {XXX}/* A = 0 B = 1 c = 3 --> feature = 013 */Li. red {XXX}/* A = 0 B = 1 c = 1 --> feature = 011 */Li {XXX}/* A = 0 B = 0 C = 1 --> feature = 001 */

  4. Order of features

     For ease of use, when the two rules have the same weight, take the latter one.

 

 

The following content is transferred from: http://www.cssk8.com/html/css_Tutorial/201007/21-2425.html

If the same element has two or more conflicting CSS rules, the browser has some basic rules to decide which one is special and wins. It may not be as important as others. In most cases, you do not need to worry about conflicts. However, large and complex CSS files or CSS files may contain conflicts. If the selector is the same, the subsequent attributes will overwrite the previous attributes. For example, the elements of P {color: red;} p {color: Blue;} p will be blue, because they follow the following rules. However, you cannot often use the same selector conflict to achieve the goal. When you use a nested selector, a reasonable conflict arises. For example, div P {color: red;} p {color: Blue;} you may see that the color of P in the DIV element is blue, just like the rules of the P element, however, the feature of the first selector is red. Basically, the more features a selector has, the style will be displayed when there is a style conflict. The actual characteristics of a set of nested selectors can be calculated. Basically, the value of the ID selector is 100, the value of the class selector is 10, and the value of each HTML selector is 1. They can be used together to calculate the value of the feature. P features 1 (an HTML selector) Div P features 2 (two HTML selectors ). tree Features 10 (one class selector) Div p. tree Features 1 + 1 + 10 = 12 (two HTML selectors, one class selector) # Baobab features 100 (one ID selector) body # content. alternative P features 112 (two HTML selectors, one ID selector and one class selector) according to the above rules, div p. tree features higher than Div P, body # content. alternative P is higher than both of them. Four principles of CSS priority: write down my own summary: Principle 1: inheritance is better than specifying that if a style is inherited, it will never be higher than the specific priority. Example 1: code:

How large is the font size? Running result:. class3 {font-size: 12px;} Example 2: code:

How large is the font size?

Running result:. class3 {font-size: 12px;} Note: The following principles are based on "specified. Principle 2: # ID>. Class> tag selector example: code:

How large is the font size? Running result: # ID3 {font-size: 25px;} Principle 3: the more specific, the more powerful. Explanation: the more specific the CSS selector style definition for an element, the clearer the hierarchy, and the higher the priority of the definition. Code:

How large is the font size?

Running result :. class1. class2. class3 {font-size: 25px;} Principle 4: Tag # ID> # ID; tag. class>. the above principle of class should also be known. Let's look at the example code:

How large is the font size? How large is the font size? Running result: Span # ID3 {font-size: 18px} | span. class3 {font-size: 18px} Many people may have such questions. Why don't we classify rule 4 into Principle 1: [tag # ID >#id> tag. class>. what about class> tag selector> wildcard? Or can we regard "tag. Class" as more specific ". Class" to be classified into Principle 2? I will answer your questions later. This involves the CSS parsing rules. These four principles also have priorities. Are they confused? Don't worry. Continue. * The weights of the four principles I believe many people know the four principles above. Do not think that the code in CSS works by knowing these four principles. Do not believe it? So you can be sure to know the following code in five seconds. Is the font size of the text in the test? Code:

How large is the font size?

For your convenience, I have removed some code. The weights of the four principles are: Principle 1> Principle 2> Principle 3> Principle 4 explanation: first, follow principle 1. Specify the following principles to start using, if no value is specified, the definition closest to it is inherited. Then start with Principle 2. 1. Compare the highest priority. Example: code:

How large is the font size?

Running result: # ID3 {font-size: 18px} can be obtained by deleting the first two rows in the preceding CSS. If there is no highest level # ID, it will be searched. class, even if the following CSS is described in principle 2, it cannot break through principle 1. 2. If the two CSS columns have the same priority as the top selector, compare their quantity. Example: code:

How large is the font size?

Running result:. class1. class2 # ID3 {font-size: 14px} 3. If the highest selection level and number are the same, compare them to the next level based on principle 2, and so on. Example 1: code:

How large is the font size?

[Color = Orange] running result: # id1. class2. class3 {font-size: 14px} [/color] * the highest level selector cannot compete. argument: [Code] Code:

How large is the font size?

In the above example, we can find out which CSS is at the end and which one works. It indicates that their levels are the same, and the latter will overwrite the previous ones. * If Principle 4 is classified into Principle 2, the argument is: code:

How large is the font size?

# Id1. class2. class3 {font-size: 12px} You can see that span # ID3 is not higher than # id1. No result start Principle 3. If the comparison result is matched with the selector starting from the highest level, and the number of levels is the same, the comparison starts to be more specific. Example: code:

How large is the font size?

# Id1. class2 span {font-size: 14px} can also be understood as "one level less style" in the comparison of the two-layer principle ", the missing level does not have a higher level than the "more hierarchical style. (Bypass password) * describe how to classify principle 4 into the irrationality of principle 3. argument: code:

How large is the font size?

In the above example, we can see that if Principle 4 is incorporated into principle 3, span. class3 is regarded as two layers. class2. if there are as many class3 levels, 12px should be displayed, but this is not the case. If the final showdown Principle 4 cannot tell the result, start the comparison of Principle 4: Example 1: code:

How large is the font size?

. Class1 p. class2. class3 {font-size: 14px} first check whether the element is described, then look at the highest level and quantity (# ID> class, html # ID> # ID ), when the same level and quantity are consistent, let's look at the next level of attributes.