CSS dynamic pseudo-class selector

CSS dynamic pseudo-class selector

Pseudo-class selector: familiar to everyone: [: link] [: visited] [: hover] [: active]
The pseudo-class selector of CSS3 is divided into six types:
(1) Dynamic pseudo-class selector
(2) Target pseudo-class selector
(3) pseudo-class selector
(4) UI pseudo-class selector
(5) structure pseudo-class selector
(6) Negative pseudo-class selector
Note: differences from other CSS selectors-pseudo-class selectors start with a colon (:)

Question?
(1) What are the functions of the CSS3 pseudo-class selector?
(2) What convenience does the selected element bring?

1. Dynamic pseudo-class selector syntax
There are two types of dynamic pseudo classes:
(1) the pseudo-class of the anchor that is often seen in the Link
(2) user behavior pseudo class

(3) the pseudo-class setting of the anchor follows the LoVe/HAte principle, that is, link-> visited-> hover-> active
(4) IE6, IE7, IE8, And a: link are more targeted than the other three.

1. 2. Dynamic pseudo-class selector compatibility

Note: IE6 only supports link anchor a: hover

2.1 target pseudo-class selector: Used to match the target element of an identifier in the URI of a document (page)

Title 1
Title 2
Title 3

Content 1

Content 2

Content 3

2.2 target pseudo-class selector syntax

Note: The target pseudo-class selector is a dynamic selector. The style effect takes effect only when the URL points to the matching element.

2.3 compatibility of the target pseudo-class selector Browser

Note: The target pseudo-class selector is not supported in IE8 or earlier versions, but the IE user will still jump to the corresponding title after clicking the link in the directory, but the title will not be highlighted; for earlier IE versions, JS is required for highlighting the effect.

2.4 Related Knowledge Memory methods caused by the target pseudo-class selector:

About the triangle angle marking method: (Unified setting of transparent)
1. Up and down, left and right are transparent
2. Point to left and right, and the upper and lower are transparent
3. Where is the direction and transparent?

Transition: property duration timing-function delay;
Property: equivalent to the corresponding Athlete
Duration: equivalent to the target, how long it takes to complete
Timing-function: select the corresponding Runway
Delay: How long will it take?

3.1 pseudo-class selector
It is very useful to use a pseudo-class selector to match the elements of a language, especially for multilingual websites. You can use it to set the font style of the page based on different language versions.

3.2 Syntax of pseudo-class selector
The pseudo-class selector is used to encode and match elements based on the language of the elements. This language information must be included in the document or associated with the document. It cannot be specified from CSS.
You can specify a language for a document in either of the following ways:
1.
2.
The pseudo-class selector allows different languages to define special rules, which is especially convenient for websites in multiple languages.
E (element): lang (language) indicates that all elements matching E are selected, and the matching element specifies the lang attribute. Its value is language.

3.3 browser compatibility

Note: For incompatible browsers such as IE6 and IE7, We can reference style sheets with different names.

3.4 practice

WWF's goal is:

Build a future where people live in harmony with nature

We hope they succeed.

4.1UI element state pseudo-class selector
It is mainly used on form elements to improve the human-computer interaction, operation logic, and overall appearance of the page, make the form page more personalized and tasteful, and make the user operate the page form more convenient and simple

4.2UI element state pseudo-class selector syntax
The UI element States include: Enable, disable, select, unselected, get focus, lose focus, lock, and standby.
HTML element form text input box, enabling and disabling;
Single-choice buttons and multiple-choice buttons for HTML element forms, sorting and unselected;

4.3 browser compatibility

IE9 supports the pseudo-class selector of UI element statuses.
For IE6 ~ For IE8, you must use the JS library to solve compatibility issues.

5.1 structure pseudo-class selector
The structure pseudo-class selector locates elements based on certain characteristics (such as relative positions) in the document tree. That is, matching specific elements through the relationship between the document tree structure can reduce the definition of IDs or class names in HTML documents and help you keep the code clean and tidy; the corresponding element is obtained through the DOM document tree.

5.2 structure pseudo-class selector syntax

Let you distinguish the artifacts of the structure pseudo-class selector!

5.3 structure pseudo-class selector browser compatibility

5.4 parameter n in the structure pseudo-class selector
: Nth-child (n)
: Nth-last-child (n)
: Nth-of-type (n)
: Nth-last-of-type (n)
(1) parameter n is a specific value: It can be any positive integer greater than 0.
(2) parameter n is an integer in the expression [n * length]: n is calculated from scratch, and length> 0 is a multiple of n.
(3) parameter n is the expression [n + length]: Select> = length Element
(4) parameter n is the expression [-n + length]: select the <= length Element
(5) parameter n is the expression [n * length + B]: B is the offset value, indicating that the nth * length + B element is selected for every length element.
(6) parameter n is the keyword [odd]: select an odd number.
(7) parameter n is the keyword [even]: select an even number.

The ": first-of-type" selector is similar to the ": first-child" selector. The difference is thatSpecifies the element type.It is mainly used to locate the first child element of a type under a parent element.

First-child is the first choice, but first-of-type is not necessarily the first choice.

6.1 negative pseudo-class selector
The negative selector [: not ()] is a new selector of CSS3. The [: not ()] In jQuery is used to locate the element that does not match this selector.

6.2 negative pseudo-class selector syntax
Filters content.

6.3 browser compatibility

7. pseudo elements

[: First-line] [: first-letter] [: before] [: after] used in CSS2.1]
CSS3 adjusted the pseudo elements and added a colon [: first-line] [: first-letter] [: before ]【:: after, the ": selection" is added]
Browser, which supports both methods

(1) pseudo element: first-letter: used to select the first letter of the text block, for example: sinking first letter
(2) pseudo element: first-line: used to select the first line of text of the element
(3) pseudo elements: before AND: after: do not refer to the content that exists in the tag, but the location where additional content can be inserted. Although the generated content will not be part of the DOM, it can also set styles. To generate content for pseudo elements, you also need to combine the content attribute
(4) pseudo element: selection: Used to match the highlighted text, that is, to select the style after the text with the mouse [note]: selection only accepts two attributes, one is background, the other is color.

Note: For IE6 ~ IE8 only supports single colon