What is the difference between pseudo elements and pseudo classes in CSS

This article mainly introduces what are the differences between pseudo-elements and pseudo-classes in CSS, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

Pseudo element

We know that with the further improvement of the CSS specification, more and more pseudo elements of CSS have been added, but in daily development, we are more optimistic about before and after. But what we use in daily development is: after {content: ";} to clear floats and add an element (taking into account the use of single colons in IE8 browsers). But what are the values for content?

1. String: content: "a string"-Note: special characters must be encoded in unicode

two。 Picture: content: url (/ path/to/benjamin.png)-the picture is inserted in its original size and cannot be resized. Because pictures support gradients, you can use gradient effects on pseudo elements.

3. No characters: content: "- this is useful for clearing floats and setting background images. We can set width and height for background images, and we can even use the background-size property to resize background images.

4. Counter: content: counter (li)-useful for setting the list ordinal style before: marker appears; see the following code:

Ol {countercounter-reset: li;} ol > li {position: relative; padding-left: 2em; line-height: 30px; list-style: none;} ol > li:before {position: absolute; top: 8px; left: 0; height: 16px; width: 16px; line-height: 16px; text-align: center; content: counter (li); countercounter-increment: li Border-radius: 50%; background-color: # ccc; font-size: 12px; color: # efefee;}

PS: we cannot set content: "Benjamin". It will not parse by HTML code snippet, but will resolve to a string.

5. Content: attr (attrName)

Content can use the attr function to obtain attribute values, especially in pseudo-classes. See the following code:

.list li {list-style: none; margin-bottom: 20px;} .list li span {vertical-align: middle;} .list li:before {content: attr (data-index); display: inline-block; width: 20px; height: 20px; text-align: center; color: # fff Vertical-align: middle; background-color: # f00; border-radius: 50%;} focus on front-end development and user experience

Having said the above, let's talk about the bug encountered in IE:

Bug description: when using pseudo-classes to switch "+" / "-" images, it is achieved by adding and removing opened classes, but the effect is weird in IE8 and cannot be rendered correctly, but it is normal in other browsers:

.plus {position: relative; display: inline-block; vertical-align: top; width: 20px; height: 20px; margin-right: 24px; border: 1px solid # fdaa47; border-radius: 3px; overflow: hidden;} / * horizontal * / .plus: before {content:'; position: absolute; top: 10px; left: 3px Width: 14px; height: 1px; background-color: # fdaa47; display: block;} / * Vertical * / .plus: after {display: block; content:''; width: 1px; height: 14px; background-color: # fdaa47; position: absolute; left: 10px; top: 3px Opened: after {top:-30px;}

When you use addClass ('opened') and removeClass (' opened') to switch between plus and minus signs: the effect in IE8 browser is not as expected, and some styles cannot be overwritten. The solution is as follows:

$('.parent'). On ('click', function () {var $I = $(this). Find (' i'), className = $i.attr ('class'); className = / opened/.test (className)? Plus': className + 'opened'; $i.replaceWith ('