Home > Developer > Web Develop
Grammar:CSS pseudo-classes are used to add special effects to certain selectors.
selectorpseudo-class{property: value}
CSS classes can also be used in conjunction with pseudo-classes
selector.class: pseudo-class {property: value}
As in the following section of code:
1.1 Anchor pseudo-classa#FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>
In a browser that supports CSS, the different states of a link can be displayed in different ways, which include: Active state, which has been questioned. The status of not being interviewed, and the mouse hover state.
a: Link {color: #FF0000 }/ * Non-visited links * /a: Visited {color: #00FF00 }/ * Visited link * /a: Hover {color: #FF00FF }/ * Move the mouse over the link * /a: Active {color: #0000FF }/ * The selected link * /Attention:
1. In the CSS definition. a:hovermust be put a:link a:visited in and after, is effective.
2. In the CSS definition. a:activemust be placed a:hover after it is valid.
3. Pseudo-class names are not sensitive to uppercase and lowercase.
Defined:
First-child a pseudo-class to select the first child element of an element.
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="Text/css"> P: First-child {font-weight: bold;} Li : First-child {text-transform:uppercase;} </style></head><body> <div> <p>These is the necessary steps:</P> <ul> <li>Intert Key</li> <li>Turn Key<strong>Clockwise</Strong> </li> <li>Push Accelerator</li> </ul> <p>Do<em>Not</em>Push the brake at the same time as the accelerator.</P> </div></body></html>effects such as:
The first rule is set to bold as all p elements of the first child element of an element. The second rule will act as an element (in HTML. This must be OL or UL elements) all LI elements of the first child element become uppercase.
Must declare
<!DOCTYPE>, such: First-child talent in IE in effect.
<style type="text/css">p:first-child { color: red; } </style>
The selector matches the P element as the first child element of whatever element
<style type="text/css">p > i:first-child { font-weight:bold; } </style>
Selector matches the <p> first element in all elements <i>
<style type="text/css">p:first-child i { color:blue; } </style>
Selectors match all elements in all elements of the first child element of the element <p> <i>
: The lang pseudo-class gives you the ability to define special rules for different languages
<style type="Text/css"> q: lang (no) { quotes: "~ " "~ "} </style> <body> <p>Text<q lang="No">Text referenced in a paragraph</q>Text</P></body>Grammar:CSS pseudo-elements are used to add special effects to certain selectors.
Syntax for pseudo-elements:
{ 属性: 值 }
CSS classes can also be used in conjunction with pseudo-elements:
{ 属性: 值 }
p.article:first-letter {color: #FF0000}<p class="article">文章中的一个段落。
</p>
：first-lineUse of:
p{font-size: 12pt}p:first-line{color: #0000FF; font-variant: small-caps}
2.1 Multiple pseudo elementsFirst-line Pseudo-elements can only be used for block-level elements.
The following properties can be applied to the first-line pseudo-element:
Font Property
Color Property
Background property
Word-spacing
Letter-spacing
Text-decoration
Vertical-align
Text-transform
Line-height
Clear
2.2 CSS2-: Before pseudo-element12pt;}p:first#FF0000; font-size: 24pt;}p:first-line#0000FF;}firstwordsofan article</p>
before(>=IE8) pseudo-elements can be used to insert certain content before an element.
2.3 CSS2-: After pseudo elementh1:before{ content: url(beep.wav)}
after(>=IE8) pseudo-classes can be used to insert certain content after an element.
h1:after{ content: url(beep.wav)}
The content property is used in conjunction with: Before and: After pseudo-elements to insert a build.
a:after { content: " (" attr(href) ")"; }
"Learn web front end from 0 to 1" CSS pseudo-class and pseudo-elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
