Home > Developer > Web Develop
Understanding of pseudo-classes and pseudo-elements
Official explanation:
The pseudo-class is simply used to represent the dynamic state of some elements, typically the various states of a link (LVHA). The CSS2 standard then expands its conceptual scope to make it a "ghost" category that is logically present but not necessarily identified in the document tree.
Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document tree.
My own understanding:
Pseudo classes, classes, class is a class, similar to class, that represents the state of some elements, but does not need to identify the classification.
A pseudo-element is an element, such as a P-tag element, that logically exists, but does not actually exist in the document tree.
Another simple understanding and distinction is:
The pseudo-class is preceded by a colon, which is two colons before the element. E:first-child pseudo-class, e::first-line as element.
Special cases:: Before and:: After pseudo element
Before and after add elements before and after elements, and therefore are pseudo-elements that have been preceded by a two colon in the CSS3 selector. Please see: w3cselect
The question comes, then why do we usually use before and after a colon in front of it?
in CSS1 and CSS2, the pseudo-elements of pseudo-class are more ambiguous than others, and even the peers will be :before :after called pseudo-classes. the old specification, pseudo-class and pseudo-elements are all with a colon, the new specification in order to distinguish, pseudo-elements unified with two "::", so, we note that the next time when writing CSS3, for the element to use two colons, pseudo-class with a colon.
Application of pseudo-class and pseudo-elements
My previous CSS common effect, said some.
Like pseudo-elements
::-webkit-scrollbar
:: Selection
::-webkit-input-placeholder
:: After
Wait a minute.
Maximum number of pseudo-elements:: After and:: Before
You can use these two pseudo-elements to do a lot of effects!
Html
<a href= "#" >haorooms</a>
Css
A
position:relative;
Display:inline-block;
Outline:none;
Text-decoration:none;
Color: #000;
font-size:32px;
padding:5px 10px;
}
A:hover::before, A:hover::after {position:absolute;}
A:hover::before {content: "\5b"; Left: -20px;}
A:hover::after {content: "\5d"; right: -20px;}
The content can be used attr or URL
For example:
A::after {content: "(" attr (HREF) ")";}
H1::before {content:url (logo.png);}
Maximum number of pseudo-class: Nth-child () selector, about Nth-child (), we look at the following
Nth-child () browser support
IE9 and above versions, Firefox, Google, Safari, opera are all supported!
Definition and usage
: the Nth-child (n) selector matches the nth child element that belongs to its parent element, regardless of the type of the element.
n can be a number, a keyword, or a formula.
For example:
P:nth-child (2)
{
Background: #ff0000;
}
<body>
The first paragraph of the <p>haorooms. </p>
<p>haorooms a second paragraph. </p>
<p>haorooms a third paragraph. </p>
The fourth paragraph of the <p>haorooms. </p>
</body>
The above code is the color of the paragraph is red?
The answer is "haorooms the first paragraph." "The Color turns red!"
Explanation:: Nth-child (n) The selector matches the nth child element that belongs to its parent element, regardless of the type of the element. P:nth-child (2), the parent element of the P tag is the second child element of Body,body is "haorooms the first paragraph. "So the first paragraph of the haorooms color changed to RED!!!
Attention
Many friends often confuse: Nth-child () and: Nth-of-type ().
The CSS3 e:nth-of-type () selector means "Select the nth element of the same class of E"
”
Look at the following example:
P:nth-of-type (2)
{
Background: #ff0000;
}
<body>
The first paragraph of the <p>haorooms. </p>
<p>haorooms a second paragraph. </p>
<p>haorooms a third paragraph. </p>
The fourth paragraph of the <p>haorooms. </p>
</body>
Code, my style just changed P:nth-child (2) to P:nth-of-type (2) and now it's "haorooms second paragraph." "The color turns red."
Odd even matches
Now let's talk about the problem of changing the color of the TR even line of the table that I opened.
Because the child element of table is generally TR, there is no other, so it can be used
Tr:nth-child (odd) and tr:nth-child (even)
Of course you can use it.
Tr:nth-of-type (odd) tr:nth-of-type (even)
Match the elements with the odd and even numbers, respectively. The odd (odd) is the same as the (2n+1) result; even (even) is the same as (2n+0) and (2n) results.
Multiple notation
: Nth-child (AN) ": Nth-of-type (AN) in the same vein, does not explain"
Matches all elements that have multiples of a. Where the letter N in the parameter an is not the default, it is a multiple notation, such as 3n, 5n.
Example:
Li:nth-child (3n) {background:orange;} /* Set the background of Li with the 3rd, 6th, 9th 、...、 All multiples of 3 to orange *
Extended
: Nth-child (2n+1),: Nth-child (2n-3),: Nth-child (4n+3), can also be: Nth-child (-an+b) that is, reverse matching.
Finally, we summarize the characteristics and differences between pseudo-class and pseudo-elements:
Original source: (slightly modified) http://www.111cn.net/cssdiv/css/89321.htm
Characteristics and differences of pseudo-class and pseudo-elements in CSS3
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
