Home > Developer > JavaScript
Css pseudo-class application and css pseudo-Application
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> CSS output image </title>
<Style type = "text/css">
. Square {width: 100px; height: 100px; background-color: # FFF; position: relative; border: 2px #000000 solid ;}
. Square: before {
Content :"";
Width: 0px;
Height: 0px;
Display: block;
Position: absolute;
Z-index: 2;
Top: 25%;
Right:-28px;
Border: 15px solid # FFF;
Border-color: transparent # FFF;
}
. Square: after {content :"";
Width: 0px;
Height: 0px;
Display: block;
Position: absolute;
Z-index: 1;
Top: 25%;
Right:-30px;
Border: 15px solid # FFF;
Border-color: transparent #000;
}
. A {width: 0; height: 0; border: 40px solid; border-color: transparent # F00 ;}
</Style>
</Head>
<Body>
<Div class = 'square '> </div>
<Div class = "a"> </div>
</Body>
</Html>
In CSS, four pseudo classes are used to define the link styles: a: link, a: visited, a: hover, And a: active. For example:
A: link
A: visited
A: hover
A: active
The preceding statements define the style of "link, accessed link, mouse over, and mouse over. Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected. Remember that their order is "LVHA ".
How to Use CSS3 pseudo classes
Many powerful new pseudo-class selectors (16 are listed in the latest W3C Specification) enable us to use element selectors within the new standard range. Before discussing these new CSS3 pseudo classes, let's briefly review these CSS selectors that are often misunderstood in Web applications. A Brief History of pseudo-classes in 1996, when the CSS1 specification was completed, some pseudo-class selectors were included, many of which were used almost every day. For example: link: visited: hover: active, these statuses can be applied to an element, usually in the form of a: pseudo class name. It is incredible that these pseudo classes were widely used before W3C released the HTML4 specification in December 1997. CSS2 came, so CSS2 came. Its recommendation specification was released in May 1998 two years later. The following is an exciting addition of the first-child and: lang () pseudo classes.: Lang has many methods to represent the document language type. If you use HTML5, you may directly place the statement (specify the local language) after the DOCTYPE declaration ). Of course, you can also use the: lang (en) pseudo class to modify page elements, which is very useful for dynamic language changes.: First-child you may already use the first-child attribute in this document. It is usually used to add or delete the upper border of the first element in the list. The strange thing is that there is no such pseudo class as last-child. Therefore, we cannot wait until the CSS3 standard supports these two sibling pseudo classes. Why do we use pseudo classes? The reason why pseudo classes are so practical is that they allow dynamic content styles. For example, in the above example, we can describe how to present a style when a user interacts with a link. As we can see, the new pseudo class allows us to dynamically set the style based on the position or status of the element in the document. 16 new pseudo classes have become part of W3C CSS recommendations. They are divided into four groups: Structure pseudo classes, State pseudo classes of UI elements, and a target) A pseudo class and a negative pseudo class. W3C is the CSS house. Now let's explore how to use these 16 new pseudo class selectors. I will use the same identifier as W3C to name the CSS class. For example, E Represents element, n represents number, and s represents selector ). Most of the new selectors in the sample code provide reference examples to intuitively see the code rendering effect. Here we will refer to a form that applies to the iPhone and uses the CSS3 pseudo class. Note that most styles in this form can be set using the id and class selector. Even so, you can still use the new pseudo-class needle to make the form icing on the cake. Email Address Personal Details Title Mr Mrs Miss First Name Initial Surname Payment Details Name on card Card number Select Card Type Visa American Express MasterCard Expiry Date MM 01 02 03 05 06 07 08 09 10 11 12/YYYY 11 12 13 14 15 16 17 18 19 Security code wocould you like Insurance?
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
