Shulou(Shulou.com)06/01 Report--

This article mainly introduces the css pseudo-classes and pseudo-elements of the case comparative analysis of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this css pseudo-classes and pseudo-elements of the case comparative analysis article will have a harvest, let's take a look at it.

Pseudo class

Pseudo-classes are the way to select certain parts of an HTML document, not based on the HTML document tree itself and its elements, nor on features such as names, attributes or content, but on other abstract conditions, such as language coding or dynamic state of an element.

The original pseudo class defines the dynamic state of elements that enter and exit over time or through user intervention. CSS2 extends this concept to include virtual concept document components or inferred parts of the document tree, such as first-child. Pseudo classes operate as if you were adding phantom classes to various elements.

Limitation: unlike pseudo elements, pseudo classes can appear anywhere in the selector chain.

Sample pseudo-class code:

ARod linkmap * Select an unvisited "a" element * /

{

Padding:4px

Text-decoration:none

Width:10%

Color:#000000;/* font color is black * /

Background-color:#99FF99;/* is set to light green * /

Border-top:2pxsolid#ccffcc;/*highlightcolor*/

Border-left:2pxsolid#ccffcc;/*highlightcolor*/

Border-bottom:2pxsolid#003300;/*shadowcolor*/

Border-right:2pxsolid#003300;/*shadowcolor*/

}

This will select any "a" element that has accessed its target. , /

{padding:4px

Text-decoration:none

Color:#000000;/*blacktextcolor*/

Background-color:#ccccff;/*settoalavender*/

Border-top:2pxsolid#ffffff;/*highlightcolor*/

Border-left:2pxsolid#ffffff;/*highlightcolor*/

Border-bottom:2pxsolid#333366;/*shadowcolor*

Border-right:2pxsolid#333366;/*shadowcolor*/

}

This selects any "a" element that is in a hovering state. This is the state during which the pointer moves within the render area of the element. The user specifies the element but does not activate it. , /

{

Color:#000000;/*blacktextcolor*/

Background-color:#99cc99;/*desaturatedcolor*/

Border-top:2pxsolid#003300;/*shadowcolor*/

Border-left:2pxsolid#003300;/*shadowcolor*/

Border-bottom:2pxsolid#ccffcc;/*highlightcolor*/

Border-right:2pxsolid#ccffcc;/*highlightcolor*/

}

This selects any "a" element that currently has focus. The focus is the state in which an element accepts keyboard input or other forms of text input. , /

{

Padding:4px

Text-decoration:none

Width:10%

Color:#000000;/*blacktextcolor*/

Background-color:#ffff99;/*settoapastelyellow*/

Border-top:2pxsolid#ffffcc;/*highlightcolor*/

Border-left:2pxsolid#ffffcc;/*highlightcolor*/

Border-bottom:2pxsolid#666633;/*shadowcolor*/

Border-right:2pxsolid#666633;/*shadowcolor*/

}

This selects any "a" element that is in the active state. Activity is the state during pointer activation (for example, pressing and releasing the mouse) in the rendering area of the element * /

{

Padding:4px

Text-decoration:none

Width:10%

Color:#000000;/*blacktextcolor*/

Background-color:#ff99ff;/*settoapink*/

Border-top:2pxsolid#ffccff;/*highlightcolor*/

Border-left:2pxsolid#ffccff;/*highlightcolor*/

Border-bottom:2pxsolid#663366;/*shadowcolor*/

Border-right:2pxsolid#663366;/*shadowcolor*/

}

Pseudo element

Pseudo-elements is used to process subparts of an element. They allow you to style part of the content of an element beyond what is specified in the document. In other words, they allow you to define logical elements that are not actually in the document element tree. Logical elements allow implicit semantic structures to be processed in CSS selectors.

Limitation: pseudo elements can only be applied to external and document-level contexts-not embedded styles. Pseudo elements are limited by where they can appear in the rule. They may only appear at the end of the selector chain (after the topic of the selector). They should appear after any class or ID name found in the selector. Only one pseudo element can be specified per selector. To handle multiple pseudo elements on a single element structure, you must create multiple style selector / declaration statements.

Pseudo elements can be used for common printing effects, such as initial caps and drop caps. They can also handle sample stylesheets of pseudo elements with attributes and values added under the generated content that does not exist in the source document (using "before" and "after").

/ * the following rule selects the first letter of title 1 and sets the font to 2em, cursive, green background. The first letter selects the first rendered letter / character of the block-level element. , /

H2:first-letter {

Font-size:2em

Font-family: "LucidaHandwriting", "LucidaSans", "LucidaConsole", cursive

Background-color:#ccffcc

}

/ * the following rule selects the first line displayed in the paragraph and makes it bold. The first line selects the first render line on the output device of the block-level element. , /

P:first-line {

Font-weight:bold

}

/ * the following rule selects anything placed before the blockquote and inserts the phrase "reference of the day:" in a small bold uppercase letter with a green background. , /

Blockquote:before {

Content: "Quoteoftheday:"

Background-color:#ccffcc

Font-weight:bold

Font-variant:small-caps

}

/ * the following rule selects anything that precedes the "Q" element and inserts smart open quotation marks. , /

Q:before {

Content:open-quote

}

/ * the following rule selects anything that is placed after the "Q" element and inserts a smart close reference. , /

Q:after {

Content:close-quote

}

This is the end of the article on "Comparative Analysis of examples between css pseudo-classes and pseudo-elements". Thank you for reading! I believe you all have a certain understanding of the knowledge of "case comparative analysis between css pseudo-classes and pseudo-elements". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.