As a CSS3 beginner, it is easy to confuse the use of a single colon (:) and a double colon (::) so that they can be used interchangeably. I've confused them myself before, because they look so much alike, like twins. But in fact, their differences are quite large, most of them are close to the house relatives. Let's start with the single colon (:) pseudo-class and double-colon (::) pseudo-elements have what are the same and different points (in addition, the single colon ":" in CSS2 is also called a pseudo-object, specifically to seehttp://www.mb5u.com/tool/css2/A single colon (:) has already existed in the CSS, I believe that the code of the CSS is bound to: hover pseudo-class is not unfamiliar. There are several more useful pseudo-classes, such as: link (links that have not been clicked), visited (links have been clicked) and keyboard input: focus (get keyboard input focus) Other like: lang Pseudo class,: First-child Pseudo class, We can go to the website to see the specific usage, here I will not repeat. In particular: First-child pseudo-class, this pseudo-class is very interesting, have to admire the people to make rules of insight, CSS3 appeared similar to the use of pseudo-class, for developers to provide a lot of convenience. In fact, pseudo-classes and pseudo-elements already exist in CSS, and CSS3 to differentiate pseudo-class and pseudo-element, pseudo-elements are written with double colons. Both pseudo-and pseudo-elements are selected for a particular element, which is heavier than the description of the state of the element, which is heavier on the description of the element itself, which is the inner connection and distinction between pseudo-classes and pseudo-elements. CSS3 Pseudo class CSS3 pseudo class is divided into two categories: state pseudo class and structural pseudo class. CSS3 State Pseudo-class follows the CSS we have mentioned above: hover,: Link,: Visited and other pseudo-classes. On the other hand, the state pseudo-class is greatly increased in CSS3, for example: First-child Select the first child element of an element;: Last-child selects the last child element of an element;: Nth-child (index) selects a specific child element of an element based on quantity, Fill in parentheses with the index value: Nth-of-type (index) selects a specific child element of an element according to the type, and the largest difference between this pseudo-class and: Nth-child () is the choice of child elements by type, not the elements of a brain. Give an example:html:<div><span> this is the number 1</span><span> this is the number 2</span><p> this is the number 3</p>< P> This is the number 4</p><div> css:div:nth-child (1) {color:blue;} Only the color of the first span element is changed to Blue div:nth-of-type (2) {color:red;} Causes the color of the second span element and the second P element to turn red, because the sub-elements of the div are divided into two categories, one is the span element, and the other is the P element. Second, CSS3 pseudo elements in the CSS already have pseudo elements: First-letter,: First-line, the new pseudo-element in CSS2: After,: BeforeCSS3 the above 4 pseudo-elements of the single colon into a double colon, plus added: Selection pseudo-elements. Here are some common features of these pseudo-elements in CSS3 (1):: First-letter and:: First-line:first-letter and: First-line The first letter and the first line of the text, respectively, This translation from the English is not difficult to understand, the first word on the newspaper capitalization processing can be used:: First-letter. Here are a few other pseudo-elements (2):: Before and:: After::before and:: After following are often followed by content, used to add to the header or tail of the element in CSS rendering. The key point is that the added content does not appear in the DOM, only as a CSS render layer to modify elements。 So don't use:: Before or:: After shows meaningful content, but only uses them to display cosmetic content, such as the icon in front of the text. As for how to add and add a prerequisite, you can write an article. Write this usage again next time you are free. about compatibility issues:Due to IE's support for CSS3, there are some minor issues to be aware of when writing code. If you only need to be compatible with Firefox, WebKit, opera and other browsers, pseudo-elements using double colon is not much of a problem, but if you need to be compatible with IE browser, then the use of a single colon is more secure.
CSS3 pseudo-classes and pseudo-elements
