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 CSS-enabled browsers, the different states of a link can be displayed in different ways, including: active, accessed, not accessed, and mouseover.
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:hover must be placed a:link and a:visited after, is valid.
2. In the CSS definition, a:active must be placed a:hover after, is valid.
3. The pseudo-class name is not case sensitive.
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 be capitalized as an element (in HTML, which is definitely OL or UL element) for all LI elements of the first child element.
Must declare
<!DOCTYPE>, so that: First-child 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 any element
<style type="text/css">p > i:first-child { font-weight:bold; } </style>
The selector matches the <p> first element in all elements <i>
<style type="text/css">p:first-child i { color:blue; } </style>
The selector matches all elements in the element that are 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-lineHow to use:
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
