Css pseudo-element selector and css pseudo Selector
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> pseudo class </title>
<Style>
/*
Pseudo element selector:
The effect of pseudo elements can be achieved only by adding an actual element.
CSS has the following four pseudo-element selectors:
·: First-line: Use a style for the first line of text of an element;
·: First-letter: Used as the first letter or first word of a text in an element;
·: Before: insert some content before an element;
·: After: insert some content after an element;
*/
P: first-line {background-color: yellow ;}
P: first-letter {color: blue ;}
P: before {content: "This is :";}
P: after {content :"! Ended ";}
/*
Pseudo class selector:
Unlike the element style in general DOM, it does not change any DOM content.
Only some elements of the modifier class are inserted. These elements are visible to users, but invisible to DOM.
The pseudo-class effect can be achieved by adding an actual class.
Common pseudo-class selectors are used on Element a, for example, a: link | a: visited | a: hover | a: active'
Tip: In CSS definition, a: hover must be placed after a: link and a: visited.
Tip: In CSS definition, a: active must be placed after a: hover, which is valid.
Structured pseudo-class selector
: Root () selector, which literally matches the root element of the document where Element E is located. In the HTML document, the root element is always The: not () selector is called a negative selector. It is exactly the same as the: not selector in jQuery. You can select all elements except an element.
: The empty () selector indicates null. It is used to select elements without any content. Here there is no content, even a space.
: Target () selector to specify a style for a target element on the page (the id of this element is used as a hyperlink in the page). This style is only used when the user clicks a hyperlink on the page, it takes effect after jump to the target element.
: The first-child () selector indicates the element E that selects the first child element of the parent element. Simply put, you can select the first child element in the element. Remember that it is a child element, not a child element.
: Nth-child () selects one or more specific child elements of an element;
: Nth-child (length);/* the parameter is a specific number.
: Nth-child (n);/* the parameter is n, and n is calculated from 0.
: Nth-child (n * length)/* n multiple selection, n starts from 0
: Nth-child (n + length);/* select the element after length
: Nth-child (-n + length)/* select an element earlier than length
: Nth-child (n * length + 1);/* Indicates selecting one of the following
// The length above is an integer
: Nth-last-child () is calculated from the last child element of a parent element to select a specific element.
: Nth-of-type (n) "selector to locate a type of child element in the parent Element
*/
: Not (p) {color: red ;}
: Empty {width: 100px; height: 20px; background: red; display: inline-block ;}
: Target {background: blue ;}
Div p: first-child {background: gray ;}
Div p: nth-child (2n) {background: yellow ;}
</Style>
</Head>
<Body>
<P>
Pseudo element selector: the effect of a pseudo element can be achieved only by adding an actual element. CSS has the following four pseudo-element selectors:
: First-line: Use a style for the first line of text of an element;
·: First-letter: Used as the first letter or first word of a text in an element;
·: Before: insert some content before an element;
·: After: insert some content after an element;
</P>
<A href = "# A"> AAAAAAAA </a>
<A href = "# B"> bbbbbbbbbb </a>
<Div id = "A"> AAAAAA </div>
<Div id = "B"> BBBBBBB </div>
<! -- Pseudo class -->
<Div>
<P> 1111 </p>
<P> 2222 </p>
<P> 333333 </p>
<P> 444444 </p>
</Div>
</Body>
</Html>
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
