2.6 pseudo-classes and pseudo-elements pseudo classes and pseudo elementsThe pseudo-class and pseudo-element selector can apply sytle to structures that do not exist in the document. It can also be applied to phantom classes, and phantom classes is composed of the state of some elements or the state of the document inferred. That is to say, a style can be applied to a document not only based on the document structure, but also in a way that cannot be accurately inferred by simply analyzing the document composition. For example, in a sports match, the Audience Cheers no matter when the main team scores. However, the main team won't know when to score, but it will cheer up as long as it scores. Although you cannot predict the time of cheering, the effect of cheering can be imagined. Http://hi.baidu.com/song70/blog/item/d46bfb334d416643ac4b5fc5.html pseudo classes and pseudo elements are special classes and elements. Pseudo classes differentiate different types of elements (for example, accessed links, unaccessed links describe the types of the two positioning anchors ). A pseudo element is a part of an element (for example, the first letter of a paragraph ).
2.6.1 pseudo-class selectorsElement A represents a link. There are two types of links: those that have been accessed and those that have not been accessed, but they cannot be distinguished from the HTML syntax. They can only be determined by comparing the links in the document and the history in the browser. Similar to the accessed and unaccessed links, the selector is called the pseudo-class selector. Generally, the browser sets the link that has not been accessed to blue and the accessed link to red. If you insert classes into a link, you can customize the color of the accessed link, such as. visited {color: red;} HTML part: <a href = "http://www.w3.org/" class = "visited"> W3C Web site </a> but there is a problem with the above syntax, when http://www.w3.org/has not been taken over, the value of classshould be unvisited, followed by visited. That is to say, we need to modify the class value based on whether it has been accessed. This is obviously a problem. Therefore, there is another way: A: visited {color: red;}, so any link to the accessed page will become red, but you do not need to add the class attribute to element. 2.6.1.1 the link pseudo-classescss2.1 defines two types of pseudo-classes, which can only be used on hyperlinks. Any element of HTML, xhtml1.0, and 1.1 has the href attribute. Any element in XML serves as a link to other resources. The following are two pseudo classes: the first pseudo class seems redundant. It seems that you can define the accessed and unaccessed classes in the following form without using the first pseudo class: A {color: Blue;} A: visited {color: red;} but in one case, there is a problem, such as <a name = "section4"> 4. the lives of meerkats </a> A does not have the href attribute, but because a {color: Blue}, the text 4. the lives of meerkats will be blue, but now a has no link and does not need to be blue. Therefore, a: link {color: Purple;} A: visited {color: Silver;} should be used to display a normally regardless of whether a has the href attribute. Combination of pseudo classes and class selector: <a href = "http://www.mysite.net/"> my home page </a> <a href = "http://www.site.net/" class = "external"> another home page </a> CSS: a. external: Link,. external: visited {color: maroon;} sets the access and unaccessed color of element a with an attribute class and its value is external. Use a combination of pseudo classes and ID selector: similar to the above, a # footer-copyright: link {font-weight: bold;} A # footer-copyright: visited {font-weight: normal;} HTML: <a href = "http://www.mysite.net/"> my home page </a> <a href = "http://www.site.net/" id = "external"> another home page </a> 2.6.1.2 dynamic pseudo -classes: the link and: visited pseudo classes are static and cannot be dynamically changed after the document is initialized and displayed. Below are several dynamic pseudo classes: Example: A: link {color: Navy;} A: visited {color: Gray;} A: hover {color: red;}: active {color: yellow;} the above four links define the colors of A in the four states when the mouse is over and accessed. In addition, there is a sequence: Link-vistied-focus-hover-active. For the importance and cause of the sequence, see the following. All elements can be used in the above three dynamic pseudo classes. 2.6.1.3 real-world issues with dynamic styling dynamic pseudo classes bring some interesting questions and features. For example, the link and vistied of The Link are both 13px fonts, while the hover type is 20px. The font is larger when the mouse is on simon.incutio.com. However, the CSS specifications state that user agents are not required to redraw a document once it's been rendered for initial display, so you can't absolutely rely on your intended effect actually happening. I stronugly recommend that you avoid designs that depend on such behavior. 2.6.1.4 select the first child element first-child to select the first child element of an element. This pseudo class is often misused. <Div> <p> these are the necessary steps: </P> <ul> <li> Insert key </LI> <li> Turn Key <strong> clockwise </strong> </LI> <li> push accelerator </ LI> </ul> <p> DO <em> not </em> push the brake at the same time as the accelerator. </P> </div> CSS: P: First-child {font-weight: bold;} li: First-child {text-transform: uppercase;} meaning: the first P element of any element and the first Li element of any element. Effect: IE6 is not supported. However, there is a way to make IE6 support. 2.6.1.5 language-based selection: Lang (). Its function is basically equal to attribute selector | =. For example, *: Lang (FR) {font-style: italic;} equals to * [Lang | = "FR"] {font-style: italic;}. The difference is, HTML documents can be used to determine the document language, Lang attributes, Meta elements, and HTTP headers in many ways. Therefore, it is more appropriate to use pseudo classes to select languages.: Lang (c) will match according to the language encoding defined in the HTML standard and rfc1766. 2.6.1.6 use pseudo classes in combination, for example, a: Link: hover: Lang (de) {color: Gray;} A: visited: hover: Lang (de) {color: Silver ;} defines the different colors of access and unaccessed links when a link in German is clicked.
2.6.2 pseudo-element selectorsPseudo elements insert fictitious elements into the document to achieve a certain effect. There are four pseudo elements. In addition, the pseudo element must be at the end of selector. 2.6.2.1 styling the first letterh2: First-letter {color: red;} sets the first letter of the text of the P (paragraph) element to red. This is equivalent to the following HTML snippet <H2> <H2: First-letter> T </H2: First-letter> his is an H2 element </H2> <H2: the first-letter> element does not appear in the source code. Instead, the browser creates and applies the corresponding style. That is to say, <H2: First-letter> is a pseudo element. Do not add <H2: First-letter>. The browser will complete the process for you. 2.6.2.2 styling the first linep: first-line {color: Purple;} the so-called first-line is based on the content displayed on the display line, that is, the same text (assuming 50 ), if a row can be displayed normally, after the browser width is adjusted, the row cannot be displayed (the first row has only 10 rows ). The style defined by first-line is only valid for the first 10 rows. 2.6.2.3 restrictions on: first-letter and: The two pseudo elements in the first-linecss2 can only be used on the block element. In css2.1: the first-letter can be used on all elements. Other restrictions:
| Table 2-3. properties permitted on Pseudo-Elements |
| : First-letter |
: First-line |
| AllFontProperties |
AllFontProperties |
| AllColorProperties |
AllColorProperties |
| AllBackgroundProperties |
AllBackgroundProperties |
| AllMarginProperties |
Word-spacing |
| AllPaddingProperties |
Letter-spacing |
| AllBorderProperties |
Text-Decoration |
| Text-Decoration |
Vertical-align |
| Vertical-align(IfFloatIs setNone) |
Text-Transform |
| Text-Transform |
Line-height |
| Line-height |
Clear(Css2 only; removed in css2.1) |
| Float |
Text-shadow(Css2 only) |
| Letter-spacing(Added in css2.1) |
|
| Word-spacing(Added in css2.1 |
|
| Clear(Css2 only; removed in css2.1) |
|
| Text-shadow(Css2 only) |
|
2.6.2.4 style before and after elements if you want to add two] symbols before each H2 and set the color to silver, as follows: H2: Before {content: "]"; color: silver;} effect: Similarly, add something to the end of an element, as follows: Body: After {content: "The end. ";}
