CSS
Pseudo-classes are used to add special effects to certain selectors.
CSS
Pseudo-elements are used to add special effects to certain selectors.
Can be clear two points, the first two are related to selectors, the second is to add some "special" effect. The special point here is that the two describe css
something else that cannot be described.
Pseudo-Class types
Pseudo element Kind
Difference
This :first-child
is compared by pseudo-class and pseudo :first-letter
-elements.
P>i:first-child {color:red}<p> <i>first</i> <i>second</i></p>
//伪类 :first-child
添加样式到第一个子元素
如果我们不使用伪类,而希望达到上述效果,可以这样做:
. first-child {color:red}<p> <i class= "First-child" >first</i> <i>second</i> </p>
That is, we add a class to the first child element and then define the style of the class. So let's take a look at the element:
P:first-letter {color:red}<p>i am Stephen Lee.</p>
Pseudo elements :first-letter
add style to first letter
So if we do not use pseudo-elements, to achieve the above effect, what should be done?
. first-letter {color:red}<p><span class= ' first-letter ' >I</span> am Stephen Lee.</p>
That is, we add one to the first letter and span
then give the span
added style.
The difference between the two has come out. That is:
The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.
Summary
Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact css3
, in order to differentiate between them, it is clear that pseudo-classes are represented by a colon, while pseudo-elements are represented by two colons.
:Pseudo-classes::Pseudo-elements
But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.
A pseudo-element consists of a double colon and a pseudo-element name. Double colons are introduced in the current specification to differentiate between pseudo-classes and pseudo-elements. However, the browser needs to support the old existing pseudo-elements, such as: First-line,: First-letter,: Before, after, and the new pseudo-element introduced in CSS3 does not allow the old single colon to be supported.
Now you can answer the questions in the title completely, for the pseudo-elements that existed before CSS2, such as: before, single colon and double colon: the Before function is the same .
Therefore, if your site only needs to be compatible with WebKit, Firefox, Opera and other browsers, it is recommended that the pseudo-elements of the use of double colons, if you have to be compatible with IE browser, or with CSS2 single colon is more secure.
转自:http://segmentfault.com/a/1190000000484493
CSS Properties-the difference between pseudo-classes and pseudo-elements