Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what is the iconic symbol of CSS3 pseudo-class selector", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the symbolic symbol of CSS3 pseudo-class selector" article.

On the basis of CSS2, CSS3 has enhanced or added many features, which make up for many shortcomings of CSS2 and make Web development more efficient and convenient.

For example, it is also an avatar, which may be square in a lower version of the browser and round in a higher version of the browser.

Due to the widespread compatibility problems in CSS3, to avoid interference caused by compatibility, the recommended version of the browser is:

When viewing the CSS reference manual, you need to pay attention to the following symbols:

For example, {1pr 4} means that one to four parameters can be set.

Here are the basics of CSS3. This article talks about the contents of the CSS3 selector.

We have learned about CSS selectors before, such as:

````div tag selector

`

CSS3 adds many flexible methods to find elements, which greatly improves the efficiency and accuracy of finding elements. CSS3 selectors are compatible with most of the selectors available in jQuery.

The signature symbol of the property selector is [].

Match meaning:

^: beginning $: end *: contains

Format:

For example, it is very convenient for us to use the attribute selector to match the className of the tag.

Here we use the class attribute as an example. Code example:

```html

CSS3- property Selector

Brief introduction

E [attr]

E [attr~=attr]

E [attr | = attr]

E [attr*=val]

E [attr^ = val]

E [attr$=val]

`

Finally, here's a form:

The signature symbol of the pseudo-class selector is:.

There are some pseudo-class selectors in CSS, such as: link,: active,: visited,: hover. These are dynamic pseudo-class selectors.

CSS3 has added other pseudo-class selectors. In this short paragraph, let's learn about the structure pseudo-class selector in CSS3: filtering by structure.

1. Format: (part I)

Understand:

(1) here we should have a good understanding of the meaning of the parent element, which refers to taking the parent element of the E element as a reference.

(2) Note: the type of the element selected in the above selector must be the specified type E. if it is not selected, it will not be valid. To understand this, take a look at the example of E:nth-child (n) in the CSS reference manual. We can understand that: first find all the selected locations according to the selector, if it is found that a location is not type E, then the location is invalid.

(3) in addition, the attribute E:nth-child (n) is also interesting. For example, for the following set of tags:

Html 1 2 3 4 5 6 7 8 9 10

In the code above:

In the selectors listed above, we just have to remember: n stands for 0, 1, 2, 3, 4, 5, 5, 6, 7, 8. It's easy to understand.

2. Format: (part II)

Since the above selectors have type, we can understand it like this: first find all the E types in the same level, and then match them according to n.

3. Format: (part III)

For example:

We can combine multiple pseudo-class selectors, such as:

If you want to mark the first three span in the first line in the figure above, we can use the structure pseudo-class selector like this:

Css dt:first-child span:nth-of-type (- nasty 3) {color: red;}

Finally, here's a form:

The signature symbol of the pseudo-element selector is::.

1. Format: (part I)

E:after and E:before are pseudo-classes in the old version and pseudo-elements in the new version of CSS3. In the new version, E:after and E:before will be automatically recognized as E::after and E::before and treated as pseudo elements for compatibility processing.

For example:

```html

Life one

`

The effect is as follows:

As can be seen in the above picture:

2. Format: (part II)

Examples of E::first-letter:

Examples of E::first-line:

Finally, here's a form:

The above is the content of this article on "what is the iconic symbol of CSS3 pseudo-class selector". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.