The understanding of pseudo-class and pseudo-elements
Official explanation
A pseudo class is simply used to represent the dynamic state of some elements, typically the various states of the link (LVHA). The CSS2 standard then expands its conceptual scope to make it a "ghost" category that all logically exists but does not need to be identified in the document tree.
A pseudo element represents a child element of an element that, although logically exists, does not actually exist in the document tree.
My own understanding:
Pseudo class, Class, class is a kind, like class, that represents the state of some elements, but does not need to identify the classification.
Pseudo element, is an element, like the P tag element, and so on, logically exists, but actually does not exist in the document tree.
Another simple understanding and distinction is:
The Pseudo class is preceded by a colon, preceded by a two colon. E:first-child Pseudo class, e::first-line as element.
Special case:: Before and:: After pseudo element
Before and after are adding elements before and after the element, so it is a pseudo element that has been preceded by a two colon in the CSS3 selector. Please see: w3cselect
Here's the problem, so why do we usually use before and a colon before?
When you look at the CSS2 selector, you know, in the old specification, the pseudo class and pseudo element all use a colon, the new specification in order to differentiate, the pseudo element unifies uses two "::", therefore, everybody notices, later writes the CSS3, for the element to use two colons, the pseudo class uses a colon.
Application of pseudo-class and pseudo-elements
My previous CSS common effect, talked about some.
Like pseudo elements
::-webkit-scrollbar
:: Selection
::-webkit-input-placeholder
:: After
Wait a minute.
The maximum number of pseudo elements used:: After and:: Before
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;}
In which content can be used attr can also use the URL
For example:
A::after {content: "(" attr (HREF) ")";}
H1::before {content:url (logo.png);}
The maximum number of pseudo classes to use: Nth-child () selector, about Nth-child (), we look at the following
Nth-child () browser support
IE9 and above version, Firefox, Google, Safari, opera support!
Definitions and usage
: the Nth-child (n) selector matches the nth child element that belongs to its parent element, regardless of the type of element.
n can be a number, keyword, or formula.
For example:
P:nth-child (2)
{
Background: #ff0000;
}
<body>
<p>haorooms the first paragraph. </p>
<p>haorooms the second paragraph. </p>
<p>haorooms a third paragraph. </p>
<p>haorooms Fourth paragraph. </p>
</body>
The above code is the paragraph color red?
The answer is "haorooms the first paragraph." "The Color turns red!"
Explanation:: The Nth-child (n) 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 the Body,body is "haorooms first paragraph." So haorooms the first paragraph color into the red!!!
Attention
Many friends often confuse: Nth-child () and: Nth-of-type ().
The Css3:nth-of-type () selector means "Specify a second p element that belongs to its parent element"
Look at the following example:
P:nth-of-type (2)
{
Background: #ff0000;
}
<body>
<p>haorooms the first paragraph. </p>
<p>haorooms the second paragraph. </p>
<p>haorooms a third paragraph. </p>
<p>haorooms Fourth paragraph. </p>
</body>
Code, my style is simply to change p:nth-child (2) to P:nth-of-type (2) and now is "haorooms the second paragraph." "The color turns red.
Odd even number match
Now let's start by talking about the change of the TR even line of the table I opened.
Because the child element of the table is generally TR, there is no other, so you can use the
Tr:nth-child (odd) and tr:nth-child (even)
Of course, it can be used
Tr:nth-of-type (odd) tr:nth-of-type (even)
Matches elements with odd and even numbers, respectively. The odd number (odd) is the same as the (2n+1) result, even (even) and (2n+0) and (2n) results.
Multiple notation
: Nth-child (a) ": Nth-of-type (AN) Similarly, do not explain"
Matches elements of all multiples of a. Where the letter N in the parameter an is not default, it is a sign of multiple notation, such as 3n, 5n.
Example:
Li:nth-child (3n) {background:orange;} /* Set the background of Li for the 3rd, 6th, 9th 、...、 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.
In short, you can use: Nth-child pseudo class, can be a number of labels have a regular display of different, showing the strong CSS3. CSS3 need more use, practice makes perfect, when writing, often will put some CSS3 attributes forget, you can write more than a few times.
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
